So überprüfen Sie, ob die Eingabedatei in jQuery leer ist

100

Ganz neu bei JS.
Ich versuche zu überprüfen, ob das Dateieingabeelement leer ist, wenn ich das Formular mit jQuery / JavaScript abschicke. Ich habe eine Reihe von Lösungen durchlaufen und nichts funktioniert für mich. Ich versuche das zu vermeiden /c/fakepath(es sei denn, es gibt keine andere Option)

<input type="file" name="videoFile" id="videoUploadFile" />

Das funktioniert nicht:

var vidFile = $("#videoUploadFile").value;

Der Dateiname kann nur abgerufen werden, wenn ich Folgendes verwende:

var vidFile = document.getElementById("videoUploadFile").files[0].name;

Wenn keine Datei verfügbar ist, gibt der Code einen Fehler aus:

Der Eigenschaftsname von undefined kann nicht gelesen werden

Das ist sinnvoll, weil das Array nicht gesetzt ist. aber ich kann nicht herausfinden, wie man damit Fehler behandelt.

Wie greife ich das Dateieingabeelement richtig ab videoUploadFile, überprüfe, ob es leer ist, und gebe eine Fehlermeldung aus, wenn es leer ist?

javascript jquery html user3753569
quelle
7
Überprüfen .files.length?
Teemu
5
Warum sollte jemand diese Frage ablehnen? Ich verstehe SO manchmal nicht. Ich habe dich wieder auf 0
hochgestuft
Sie können auch nicht leere Dateien filtern, wenn Sie mehr als eine im Formular haben:var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });
Piotr Kowalski

Antworten:

176

Überprüfen Sie einfach die Länge der Eigenschaft files , bei der es sich um ein FileList- Objekt handelt, das im Eingabeelement enthalten ist

if( document.getElementById("videoUploadFile").files.length == 0 ){
    console.log("no files selected");
}
Patrick Evans
quelle
( document.getElementById("videoUploadFile").files.length === 0 )
Pathros
140

Hier ist die jQuery-Version davon:

if ($('#videoUploadFile').get(0).files.length === 0) {
    console.log("No files selected.");
}
Salim
quelle
1
Diese Antwort ist angemessener, da das OP nach einer JQuery-Lösung gefragt hat.
Hussain Akbar
$('#videoUploadFile').get(0)das gleiche wie, $('#videoUploadFile')[0]aber vielleicht get()macht einige Sanity Checks
Zanderwar
18

Um zu überprüfen, ob die Eingabedatei leer ist oder nicht, indexsollten Sie Folgendes mithilfe der Dateilängeneigenschaft angeben:

var vidFileLength = $("#videoUploadFile")[0].files.length;
if(vidFileLength === 0){
    alert("No file selected.");
}
Mamun
quelle
3

Fragen: Wie überprüfe ich, ob die Datei leer ist oder nicht?

Antwort: Ich habe dieses Problem mit diesem Jquery-Code behoben 

//If your file Is Empty :     
      if (jQuery('#videoUploadFile').val() == '') {
                       $('#message').html("Please Attach File");
                   }else {
                            alert('not work');
                   }

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="videoUploadFile">
<br>
<br>
<div id="message"></div>
Erweitern Sie das Snippet

Adnan Limdiwala
quelle
1
Weitere Erklärungen, warum dies funktionieren würde oder was in der ursprünglichen Frage falsch war, würden dazu beitragen, die Qualität dieser Antwort zu verbessern.
Josh Burgess
@josh burgess Diese Antwort war, wie man überprüft, ob die Datei leer ist oder nicht. Dies ist eine andere Möglichkeit, Ihre Datei zu überprüfen, wenn Sie ein Formular mit jquery senden.
Adnan Limdiwala
@JoshBurgess Das OP fragt, wie dies in jQuery gemacht werden soll. Alle anderen Antworten verwenden entweder Vanilla JS oder eine Kombination aus JS und jQuery. Dies ist der einzige, der ausschließlich jQuery verwendet. Vielleicht bin ich wählerisch, aber ich mische jQuery nicht gerne mit Vanilla JS, es sei denn, ich muss es wirklich.
Eduard Luca
@EduardLuca Answer ist über zwei Jahre alt. Es wurde zu dieser Zeit als minderwertig gekennzeichnet. Eine Erklärung des Codes wird von der SO-Community im Allgemeinen geschätzt, und der Kommentar war als hilfreiche Erinnerung gedacht, um nicht nur die Postleitzahl zu veröffentlichen, sondern auch zu erklären, was der Code ist und warum er funktioniert. Hoffe, das hilft, die Dinge zu klären.
Josh Burgess
3

Ich weiß, dass ich zu spät zur Party komme, aber ich dachte, ich würde hinzufügen, was ich letztendlich dafür verwendet habe - das heißt, einfach zu überprüfen, ob die Datei-Upload-Eingabe keinen wahrheitsgemäßen Wert enthält, mit dem nicht-Operator & JQuery wie folgt:

if (!$('#videoUploadFile').val()) {
  alert('Please Upload File');
}

Beachten Sie, dass Sie dieses Formular möglicherweise auch mit dem folgenden Handler umschließen möchten, um zu verhindern, dass das Formular gesendet wird:

$(document).on("click", ":submit", function (e) {

  if (!$('#videoUploadFile').val()) {
  e.preventDefault();
  alert('Please Upload File');
  }

}
Joel Youngberg
quelle