Ausblenden der upload-submit-button, wenn das Feld "Datei" leer ist

Mit diesem einfachen Beispiel

<form action="" method="post" enctype="multipart/form-data">
            Upload images: <input type="file" name="images[]" multiple="multiple"> <input type="submit" name="submitImgs" value="Upload"/>
        </form>

Wie kann ich die ausblenden die Schaltfläche Absenden, bis etwas in das Feld Datei, ich habe versucht, ein php-script schauen, ob $_FILES['error'] == 4 oder is_file_uploaded, etc und die, die nicht arbeiten. Also ich will einfach nur verstecken Sie die Taste, bis etwas ausgewählt wird im Feld "Datei".

Die Antwort könnte in javascript, jQuery... I don ' T care 😀

Dank

InformationsquelleAutor Warface | 2012-03-09
  1. 7

    Den <input type="file"> element hat eine files Eigenschaft.

    Einfach überprüfen files.length.

    jQuery Beispiel, das ändert die Schaltfläche "senden" auf die Fliegen:

    //Select the <input type="file"> element
$('input[type=file][name="images[]"]').change(function(){
    var hasNoFiles = this.files.length == 0;
    $(this).closest('form') /* Select the form element */
       .find('input[type=submit]') /* Get the submit button */
       .prop('disabled', hasNoFiles); /* Disable the button. */
});
    • Sollte der submit-button deaktiviert werden, beim starten??
    • Ja, dies kann durch das hinzufügen disabled Ihrer submit-button.
    InformationsquelleAutor Rob W
  2. 0

    Verwenden Sie diese. Fügen Sie den code auf der change Fall der Datei field.

      $(function() {
     $("input:file").change(function() {
       var fileName = $(this).val();
       if(filename != "") { $("#submitButtonId").show(); } //show the button
     });
  });
    InformationsquelleAutor Starx
  3. 0

    Ist der standardmäßige Zustand des Einsenden, sollten ausgeblendet werden (CSS display: none)
    Und auf change-Ereignis der Datei-Feld, zeigen Sie, dass submit-button

    Ihr den code

    <script>
$(function() {
  $("#myfileinput").change(function() {
    if($(this)).val() != "") $("submit").show();
  });
});
</script/>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input id="myfileinput" type="file" name="images[]" multiple="multiple">
<input type="submit" name="submitImgs" value="Upload" style="display:none"/>
</form>
    InformationsquelleAutor BnW
  4. 0
    <script>
function checkFile() {
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    if(size > 0) {
        document.getElementById('submit').style.display='block';
    }
}
</script>
<form action="" method="post" enctype="multipart/form-data">
            Upload images: <input type="file" onChange="checkFile()" name="images[]" multiple="multiple"> <input type="submit" style="display:none;" name="submitImgs" value="Upload" id="submit" />
</form>
    • ActiveXObject ist eine proprietäre Micro$oft-browser-Erweiterung. Dieser code ist nur manchmal Arbeit in (älteren Versionen von) IE. Auch getElementById ist eine Funktion, nicht eine Eigenschaft. Verwenden Sie Klammern anstelle von eckigen Klammern.
    InformationsquelleAutor Wietse de Vries
Schreibe einen Kommentar