Question

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

<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中检查过，但无论是在我的实际脚本中还是在浏览器控制台中，它都会一直发生。）不幸的是，＆＃34;检查是否有文件＆＃34;可识别但不可判定的操作实际上是无用的。那么我该如何判断bgImg字段是否为空？

我意识到我也可以只检查表单的elements['bgImg'].files对象，但FormData API已经存在，并且它更整洁，并且它将成为如果它没有显然致命地被塞住，那就更容易了！我错过了什么吗？如果这在某种程度上是使用假定方便的FormData对象的错误方式，那么我该怎么做呢？检查files集合实际上是唯一的解决方案吗？

编辑：进一步调查显示，此API在Firefox以外的浏览器中支持相当差，因此实际检查element.files可能是更好的解决方案。我仍然感到困惑，为什么这会在Firefox中崩溃浏览器。如果不久就会回答这方面的答案，我可能会提交自己的答案。

Answer 1

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

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

Answer 2

轻松的方式：

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

Answer 3

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

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

3 个答案: