Come verificare se il file di input è vuoto in jQuery

100

Nuovo di zecca per JS.
Sto cercando di controllare se l'elemento di input del file è vuoto quando invio il modulo con jQuery / JavaScript. Ho esaminato un sacco di soluzioni e niente funziona per me. Sto cercando di evitare /c/fakepath(a meno che non ci siano altre opzioni)

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

Questo non funziona:

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

L'unico modo per ottenere il nome del file è se utilizzo quanto segue:

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

Se non ci sono file disponibili, il codice genera un errore:

Impossibile leggere il nome della proprietà di undefined

il che ha senso perché l'array non è impostato. ma non riesco a capire come gestire gli errori con questo.

Come prendo correttamente l'elemento di input del file videoUploadFile, controllo se è vuoto, lancio un messaggio di errore se è vuoto?

javascript jquery html

— user3753569
fonte

7

Controllare .files.length?

— Teemu

5

Perché qualcuno dovrebbe sottovalutare questa domanda? A volte non capisco COSÌ. Ti ho votato di nuovo a 0.

— Seano666

puoi anche filtrare i file non vuoti se ne hai più di uno nel modulo:var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });

— Piotr Kowalski

177

Basta controllare la proprietà length of files , che è un oggetto FileList contenuto nell'elemento di input

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

— Patrick Evans
fonte

1

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

— Pathros

140

Ecco la versione jQuery di esso:

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

— Salim
fonte

1

Questa risposta è più appropriata in quanto l'OP ha chiesto una soluzione JQuery.

— Hussain Akbar,

$('#videoUploadFile').get(0)come $('#videoUploadFile')[0]ma forse get()fa alcuni controlli di sanità mentale

— zanderwar

18

Per verificare se il file di input è vuoto o meno utilizzando la proprietà della lunghezza del file, indexdovrebbe essere specificato come segue:

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

— Mamun
fonte

3

Domande: come controllare che il file sia vuoto o no?

Risposta: Ho risolto questo problema utilizzando questo codice 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>

Espandi lo snippet

— Adnan Limdiwala
fonte

1

Ulteriori spiegazioni sul motivo per cui questo avrebbe funzionato o cosa c'era di sbagliato nella domanda originale aiuterebbe ad aumentare la qualità di questa risposta.

— Josh Burgess

@ josh burgess questa risposta era come controllare che il file sia vuoto o meno è un altro modo per controllare il tuo file quando invii il modulo usando jquery.

— Adnan Limdiwala

@JoshBurgess l'OP chiede come farlo in jQuery. Tutte le altre risposte utilizzano JS vaniglia o una combinazione di JS e jQuery. Questo è l'unico che utilizza esclusivamente jQuery. Forse sono esigente, ma non mi piace mescolare jQuery con JS vaniglia a meno che non sia davvero necessario.

— Eduard Luca

@EduardLuca Answer ha più di due anni. All'epoca era contrassegnato come di bassa qualità. Una spiegazione del codice è generalmente apprezzata dalla comunità SO e il commento è stato inteso come un utile promemoria non solo per postare il codice, ma per spiegare cos'è il codice e perché funziona. Spero che questo aiuti a chiarire le cose.

— Josh Burgess,

3

So di essere in ritardo alla festa ma ho pensato di aggiungere quello che ho finito per usare per questo - che è semplicemente controllare se l'input di caricamento del file non contiene un valore veritiero con l'operatore not e JQuery in questo modo:

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

Tieni presente che se questo è in un modulo, potresti anche volerlo racchiudere con il seguente gestore per impedire l'invio del modulo:

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

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

}

— Joel Youngberg
fonte