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?


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");
}

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.");
}

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.");
}

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>


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');
  }

}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.