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


100

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,检查它是否为空,如果它为空,则抛出错误消息?


7
检查.files.length
Teemu 2014年

5
为什么有人会否决这个问题?有时候我不太明白。我upvoted你回到0
Seano666

如果表单上有多个文件,您还可以过滤非空文件:var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });
Piotr Kowalski,

Answers:


177

只需检查文件的长度属性,它是输入元素中包含的FileList对象

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

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

140

这是它的jQuery版本:

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

1
由于OP要求使用JQuery解决方案,因此此答案更合适。
侯赛因·阿克巴尔

$('#videoUploadFile').get(0)相同,$('#videoUploadFile')[0]但也许进行了get()一些理智检查
zanderwar

18

要使用文件长度属性检查输入文件是否为空,index应指定如下:

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

3

问题:如何检查文件是否为空?

答:我使用此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
进一步解释为何有效或原始问题中的错误将有助于提高此答案的质量。
Josh Burgess

@josh burgess这个答案是如何检查文件是否为空,这是使用jquery提交表单时检查文件的另一种方法。
Adnan Limdiwala

@JoshBurgess OP正在询问如何在jQuery中执行此操作。所有其他答案都使用香草JS或JS和jQuery的组合。这是唯一专门使用jQuery的人。也许我很挑剔,但除非确实需要,否则我不喜欢将jQuery与香草JS混合使用。
爱德华·卢卡

@EduardLuca Answer已经超过两年了。当时它被标记为低质量。SO社区通常对代码的解释表示赞赏,并且该注释旨在作为一种有用的提示,不仅用于发布代码,还用于解释代码是什么以及为什么起作用。希望这有助于清理问题。
乔什·伯吉斯

3

我知道我参加聚会的时间很晚,但是我想我会添加最终用于此目的的东西,即使用not运算符和JQuery来简单地检查文件上传输入是否不包含真实值,如下所示:

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

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

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

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

}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.