我如何检查如果FormData文件是空的

How do I check if a FormData file is empty?

本文关键字：文件 FormData 如果 何检查 检查      更新时间：2023-09-26

我正在创建一个AJAX表单，其中包含指定背景颜色或上传背景图像的选项。目标是如果为bgImg字段指定了一个文件，则忽略bgColor字段。

<label>Color: <input type="color" name="bgColor" value="#000000"></label><br>
<label>Image: <input type="file" name="bgImg" accept="image/png"></label><br>
我认为收集表单数据最简单的方法当然是使用FormData API: 
var fd = new FormData(document.getElementById('myForm'));

问题是，我不知道如何检查FormData对象是否已选择文件。无论文件输入是否为空，fd.has('bgImg')返回true，因为该字段存在——好吧，这是明智的。

但是，虽然fd.get('bgImg')工作良好，如果文件已指定，然后我可以验证积极的情况下，当文件输入为空，同一行直接崩溃我的浏览器!(我只在Firefox中进行了检查，但无论是在我的实际脚本中还是在浏览器控制台中，这种情况都会发生。)不幸的是，"检查是否有文件"操作是可识别的，但不可确定的，实际上是无用的。那么我应该如何找出bgImg字段是空的?

我意识到我也可以只是检查表单的elements['bgImg'].files对象，但FormData API已经在那里，它更整洁，它将更容易，如果它没有明显致命的漏洞!我是不是错过了什么?如果这在某种程度上是使用假定方便的FormData对象的错误方式，那么我应该做什么呢?检查files收集实际上是唯一的解决方案吗?

编辑:进一步的调查显示，这个API在Firefox以外的浏览器上的支持非常差，所以实际上检查element.files可能是更好的解决方案。不过，我仍然不明白为什么这会导致Firefox浏览器崩溃。如果这方面的答案不会很快出现，我可能会提交我自己的答案。

不幸的是，Firefox中FormData API的这种行为似乎可能是一个错误。然而，考虑到跨浏览器对FormData方法的支持相当少，更好的解决方案可能是检查表单元素:

var formFields = document.getElementById('mandelForm').elements;
console.log(formFields['bgImg'].files.length > 0); // True if file selected

简单方法:

let fd= new FormData();
console.log(!!fd.entries().next().value); // false
fd.append("foo", 'xxx')
console.log(!!fd.entries().next().value); // true

fd = new FormData();
for (var i = 0 ; i < files.length ; i ++){
      if(files[i].size > 0)
      {
            fd.append('file', files[i]);
      }
}
相关文章：