如何在jQuery中检查输入文件是否为空答案

【问题标题】：How to check if input file is empty in jQuery如何在jQuery中检查输入文件是否为空
【发布时间】：2014-09-11 17:43:55
【问题描述】：

全新的 JS。
我正在尝试使用 jQuery/JavaScript 提交表单时检查文件输入元素是否为空。我已经经历了一堆解决方案，但没有什么对我有用。我试图避免/c/fakepath（除非没有其他选择）

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

这不起作用：

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

获得文件名的唯一方法是使用以下内容：

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

如果没有可用的文件，代码会抛出错误：

无法读取未定义的属性名称

这是有道理的，因为没有设置数组。但我不知道如何对此进行任何错误处理。

如何正确抓取文件输入元素videoUploadFile，检查是否为空，如果为空则抛出错误信息？

【问题讨论】：

检查.files.length?
如果表单上有多个文件，也可以过滤非空文件：var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });

标签： javascript jquery html

【解决方案1】：

只检查files属性的长度，这是一个包含在输入元素上的FileList对象

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

【讨论】：

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

【解决方案2】：

这是它的 jQuery 版本：

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

【讨论】：

这个答案更合适，因为 OP 要求 JQuery 解决方案。
$('#videoUploadFile').get(0) 与 $('#videoUploadFile')[0] 相同，但也许 get() 会进行一些健全性检查

【解决方案3】：

检查输入文件是否为空通过使用文件长度属性，index 应指定如下：

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

【讨论】：

【解决方案4】：

我知道我迟到了，但我想我会添加我最终使用的东西 - 这是简单地检查文件上传输入是否不包含带有 not 运算符和 JQuery 之类的真实值所以：

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

请注意，如果这是在表单中，您可能还需要使用以下处理程序将其包装以防止表单提交：

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

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

}

【讨论】：

【解决方案5】：

问题：如何检查文件是否为空？

Ans：我已经使用这个 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>

【讨论】：

进一步解释为什么这会起作用或原始问题中的错误将有助于提高此答案的质量。
@josh burgess 这个答案是如何检查文件是否为空是使用 jquery 提交表单时检查文件的另一种方法。
@JoshBurgess OP 询问如何在 jQuery 中执行此操作。所有其他答案要么使用 vanilla JS，要么使用 JS 和 jQuery 的组合。这是唯一一个专门使用 jQuery 的人。也许我很挑剔，但我不喜欢将 jQuery 与 vanilla JS 混合，除非我真的必须这样做。
@EduardLuca 答案已超过两年。当时它被标记为低质量。 SO 社区通常对代码的解释表示赞赏，并且该评论的目的是提醒人们不仅要发布代码，还要解释代码是什么以及它为什么起作用。希望这有助于解决问题。

【解决方案6】：

  $("#customFile").change(function() { 
    var fileName = $("#customFile").val();  

    if(fileName) { // returns true if the string is not empty   
        $('.picture-selected').addClass('disable-inputs'); 
        $('#btn').removeClass('disabled');   
    } else { // no file was selected 
      $('.picture-selected').removeClass('disable-inputs'); 
      $('#btn').addClass('disabled');
    }  
  });

【讨论】：

我认为您应该在帖子中添加一些 cmets。

【解决方案7】：

if (data.name == '') {
   //file doesn't exist;
}
else {
   //file exist;
}

【讨论】：