Como verificar se o arquivo de entrada está vazio no jQuery

100

Novo em JS.
Estou tentando verificar se o elemento de entrada do arquivo está vazio ao enviar o formulário com jQuery / JavaScript. Eu passei por um monte de soluções e nada está funcionando para mim. Estou tentando evitar o /c/fakepath(a menos que não haja outra opção)

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

Isso não funciona:

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

A única maneira de obter o nome do arquivo é usando o seguinte:

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

Se não houver nenhum arquivo disponível, o código gerará um erro:

não pode ler o nome da propriedade de indefinido

o que faz sentido porque a matriz não está definida. mas não consigo descobrir como fazer qualquer tratamento de erros com isso.

Como faço para obter corretamente o elemento de entrada do arquivo videoUploadFile, verificar se está vazio e lançar uma mensagem de erro se estiver vazio?

user3753569
fonte
7
Verificar .files.length?
Teemu
5
Por que alguém iria negar essa pergunta? Eu não entendo ASSIM às vezes. Eu votei contra você de volta para 0.
Seano666
você também pode filtrar arquivos não vazios se tiver mais de um no formulário:var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });
Piotr Kowalski

Respostas:

177

Basta verificar a propriedade length of files , que é um objeto FileList contido no elemento de entrada

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

Aqui está a versão jQuery dele:

if ($('#videoUploadFile').get(0).files.length === 0) {
    console.log("No files selected.");
}
Salim
fonte
1
Essa resposta é mais apropriada porque o OP solicitou uma solução JQuery.
Hussain Akbar
$('#videoUploadFile').get(0)o mesmo que, $('#videoUploadFile')[0]mas talvez get()faça algumas verificações de sanidade
zanderwar
18

Para verificar se o arquivo de entrada está vazio ou não usando a propriedade de comprimento do arquivo, indexdeve ser especificado da seguinte forma:

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

Perguntas: como verificar se o arquivo está vazio ou não?

Resp: Eu resolvi esse problema usando este código 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>

Adnan Limdiwala
fonte
1
Uma explicação adicional sobre por que isso funcionaria ou o que estava errado na pergunta original ajudaria a aumentar a qualidade dessa resposta.
Josh Burgess de
@josh burgess esta resposta foi como verificar o arquivo está vazio ou não é outra maneira de verificar o seu arquivo ao enviar o formulário usando jquery.
Adnan Limdiwala
@JoshBurgess o OP está perguntando como fazer isso no jQuery. Todas as outras respostas usam JS vanilla ou uma combinação de JS e jQuery. Este é o único que usa exclusivamente jQuery. Talvez eu seja exigente, mas não gosto de misturar jQuery com vanilla JS, a menos que seja realmente necessário.
Eduard Luca
A resposta @EduardLuca tem mais de dois anos. Foi sinalizado como de baixa qualidade na época. Uma explicação do código é geralmente apreciada pela comunidade SO, e o comentário foi feito como um lembrete útil não apenas para postar o código, mas para explicar o que é o código e por que funciona. Espero que ajude a esclarecer as coisas.
Josh Burgess
3

Sei que estou atrasado para a festa, mas pensei em adicionar o que acabei usando para isso - que é simplesmente verificar se a entrada de upload do arquivo não contém um valor verdadeiro com o operador not & JQuery assim:

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

Observe que, se estiver em um formulário, você também pode envolvê-lo com o seguinte manipulador para evitar que o formulário seja enviado:

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

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

}
Joel Youngberg
fonte