Javascript 如何检查FormData文件是否为空？

我正在创建一个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对象是否选择了文件。无论文件输入是否为空，

fd.has（'bgImg'）

返回true，因为字段存在——好的，这是合理的

但是，尽管

fd.get（'bgImg'）

在指定了文件后可以正常工作，然后我可以验证肯定的情况，但当文件输入为空时，同一行会直接导致我的浏览器崩溃！（我只在Firefox中进行了检查，但无论是在我的实际脚本中还是在浏览器控制台中都会发生这种情况。）不幸的是，一个可识别但不可确定的“检查是否存在文件”操作实际上是无用的。那么我该如何判断

bgImg

字段是否为空

我意识到我也可以只检查表单的

元素['bgImg'].files

对象，但是FormData API已经存在了，而且它更整洁，如果它没有明显的致命性损坏，那就更容易了！我是不是错过了什么？如果这在某种程度上是使用假定方便的FormData对象的错误方式，那么我该怎么做呢？检查

文件

集合实际上是唯一的解决方案吗

---

编辑：进一步的调查显示，除了Firefox之外，该API在浏览器中的支持非常差，因此实际上检查

元素.files

可能是更好的解决方案。不过，我仍然不明白为什么这会使Firefox的浏览器崩溃。如果这方面的答案不是很快就能得到，我可能会提交我自己的答案。

不幸的是，Firefox中FormData API的这种行为似乎是一个bug。但是，考虑到跨浏览器的FormData方法的可用性，更好的解决方案可能是检查表单元素：

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

fd=newformdata（）；
对于（var i=0；i0）
{
fd.append（'file'，files[i]）；
}
}

eazy方式：

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

---

这是一个好问题。据我所知，您无法使用本机方法检查FormData是否为空或是否包含任何内容。我想，

（element.files | | | element.value）.length>0 | | element.file

（或类似的东西）是唯一的解决方案…

FormData

get

和

getAll

也会使我的浏览器崩溃。已经有Bugzilla的bug报告了吗？到目前为止找不到任何东西…我也找不到，所以我想我会提交一个。在恢复了我的常识后，我意识到，无论我多么严重地滥用API，它都可能不会导致浏览器崩溃，所以它一定是一个bug。@I已经提交了一个：这个bug最近出现了。请您的回答解释这个代码是什么，以及为什么它解决了这个问题。对于未来的读者来说，仅仅是一堆代码并不是很有用。

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

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