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

zf9nrax1  于 2023-05-16  发布在  Java
关注(0)|答案(7)|浏览(115)

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

zi8p0yeb

zi8p0yeb1#

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

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

z9zf31ra2#

下面是它的jQuery版本:

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

cnwbcb6i3#

要使用file length属性检查输入文件是否为空,应像下面这样指定index

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

mrphzbgm4#

我知道我迟到了,但我想我会添加我最终使用的东西-这是简单地检查文件上传输入是否不包含带有not运算符的truthy值& JQuery如下:

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

请注意,如果这是在表单中,您可能还希望使用以下处理程序 Package 它,以防止表单提交:

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

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

}
zxlwwiss

zxlwwiss5#

问:如何检查文件字段是否为空?
答:我已经用这个Jquery代码解决了这个问题

//If your file Is Empty:
if ($('#videoUploadFile').val() == '') {
    $('#message').html("Please Attach File");
} else {
    alert('ok');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="file" id="videoUploadFile">
</form>
<br>
<br>
<div id="message"></div>
jv4diomz

jv4diomz6#

$("#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');
    }  
  });
4ngedf3f

4ngedf3f7#

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

相关问题