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

Question

我正在创建一个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集合实际上是唯一的解决方案吗？

编辑：进一步调查发现，除Firefox之外的浏览器对此API的支持非常差，因此实际上检查element.files可能是更好的解决方案。但我仍然对为什么这会导致Firefox崩溃感到困惑。如果不久之后没有关于这个问题的答案，我可能会提交自己的答案。

- endemic

---

这是一个好问题。据我所见，您无法使用本机方法检查FormData是否为空或其中是否有任何内容。https://developer.mozilla.org/en-US/docs/Web/API/FormData - kemicofa ghost

我猜，(element.files||element.value).length>0||element.file（或类似的东西）是唯一的解决方案... FormData get 和 getAll 也会使我的浏览器崩溃。Bugzilla 上是否已经有此问题的 Bug 报告？到目前为止我找不到任何信息... - Sebastian Simon

我也找不到，所以我想我会提交一个。恢复理智后，我意识到无论我如何滥用API，它都不应该导致浏览器崩溃，因此这一定是一个错误。 - endemic

@endemic 我已经提交了一个：https://bugzilla.mozilla.org/show_bug.cgi?id=1187157 - Sebastian Simon

糟糕，我弄错了。把我的错误标记为与你的重复，并进行了评论。我对Bugzilla还不太熟悉！ - endemic

该漏洞最近已经修复。 - Sebastian Simon

Answer 1

火狐浏览器中FormData API的这种行为似乎可能是一个bug，不幸的是。但是，考虑到跨浏览器对FormData方法的支持相当有限，更好的解决方案可能是无论如何都要检查表单元素：

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

- endemic

Answer 2

简单易行的方法：

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

- izik f

Answer 3

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

- Johan

---

请[编辑]您的回答，解释这段代码是什么以及为什么它能够解决这个问题。仅仅提供一行代码对于未来的读者并不够有用。 - Cody Gray