Jak sprawdzić, czy plik wejściowy jest pusty w jQuery


102

Nowość w JS.
Próbuję sprawdzić, czy element wejściowy pliku jest pusty podczas przesyłania formularza za pomocą jQuery / JavaScript. Przeszedłem przez kilka rozwiązań i nic dla mnie nie działa. Próbuję uniknąć /c/fakepath(chyba że nie ma innej opcji)

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

To nie działa:

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

Jedyny sposób, w jaki mogę uzyskać nazwę pliku, to użycie następującego:

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

Jeśli nie ma dostępnego pliku, kod generuje błąd:

nie można odczytać nazwy właściwości undefined

co ma sens, ponieważ tablica nie jest ustawiona. ale nie mogę dowiedzieć się, jak zrobić z tym obsługę błędów.

Jak poprawnie pobrać element wejściowy pliku videoUploadFile, sprawdzić, czy jest pusty, wyrzucić komunikat o błędzie, jeśli jest pusty?


7
Sprawdź .files.length?
Teemu

5
Dlaczego ktoś miałby głosować przeciw temu pytaniu? Czasami tak nie rozumiem. Głosowałem za tobą z powrotem na 0.
Seano666,

możesz również filtrować niepuste pliki, jeśli masz więcej niż jeden na formularzu:var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });
Piotr Kowalski

Odpowiedzi:


179

Wystarczy sprawdzić właściwość length of files , która jest obiektem FileList zawartym w elemencie wejściowym

if( document.getElementById("videoUploadFile").files.length == 0 ){
    console.log("no files selected");
}

1
( document.getElementById("videoUploadFile").files.length === 0 )
Pathros

140

Oto jego wersja jQuery:

if ($('#videoUploadFile').get(0).files.length === 0) {
    console.log("No files selected.");
}

1
Ta odpowiedź jest bardziej odpowiednia, ponieważ OP poprosił o rozwiązanie JQuery.
Hussain Akbar

$('#videoUploadFile').get(0)to samo, $('#videoUploadFile')[0]ale być może get()robi pewne testy poczytalności
zanderwar

18

Aby sprawdzić, czy plik wejściowy jest pusty, czy nie, za pomocą właściwości długości pliku, indexnależy określić w następujący sposób:

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

4

Wiem, że spóźniłem się na imprezę, ale pomyślałem, że dodam to, czego ostatecznie użyłem do tego - czyli po prostu sprawdzić, czy dane wejściowe przesyłania pliku nie zawierają prawdziwej wartości z operatorem not i JQuery w następujący sposób:

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

Zwróć uwagę, że jeśli to jest w formularzu, możesz również chcieć opakować go następującym programem obsługi, aby zapobiec przesyłaniu formularza:

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

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

}

3

Pytania: jak sprawdzić, czy plik jest pusty, czy nie?

Odp: Rozwiązałem ten problem za pomocą tego kodu JQuery

//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>


1
Dalsze wyjaśnienie, dlaczego to zadziała lub co było nie tak w pierwotnym pytaniu, pomogłoby podnieść jakość tej odpowiedzi.
Josh Burgess

@josh burgess ta odpowiedź brzmi, jak sprawdzić, czy plik jest pusty, czy nie, to kolejny sposób na sprawdzenie pliku podczas przesyłania formularza za pomocą jquery.
Adnan Limdiwala

@JoshBurgess OP pyta, jak to zrobić w jQuery. Wszystkie inne odpowiedzi wykorzystują zwykły JS lub kombinację JS i jQuery. Jest to jedyny, który używa wyłącznie jQuery. Może jestem wybredny, ale nie lubię mieszać jQuery z waniliowym JS, chyba że naprawdę muszę.
Eduard Luca

@EduardLuca Odpowiedź ma ponad dwa lata. Został wówczas oznaczony jako niskiej jakości. Wyjaśnienie kodu jest ogólnie doceniane przez społeczność SO, a komentarz miał być pomocnym przypomnieniem nie tylko kodu pocztowego, ale także wyjaśnienia, czym jest kod i dlaczego działa. Mam nadzieję, że to pomoże wyjaśnić sprawę.
Josh Burgess
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.