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

I'm creating an AJAX form which includes the option to either specify a background color or upload a background image. The goal is for the bgColor field to be ignored if a file has been specified for the bgImg field.

我正在创建一个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>

I figured the easiest way to collect the form data is, of course, using the FormData API:

我认为收集表单数据的最简单方法当然是使用FormData API：

var fd = new FormData(document.getElementById('myForm'));

The problem is, I don't know how to check the FormData object for whether or not a file has been selected. Whether or not the file input is empty, fd.has('bgImg') returns true because the field is present--okay, that's sensible.

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

But although fd.get('bgImg') works fine if a file has been specified, and I can then verify the positive case, when the file input is empty that same line straight up crashes my browser! (I've only checked in Firefox, but it happens consistently whether in my actual script or from the browser console.) Unfortunately a "check whether there's a file" operation that is recognizable but undecidable is effectively useless. So how am I supposed to figure out if the bgImg field is empty?

但是，如果指定了一个文件，fd.get（'bgImg'）工作正常，然后我可以验证肯定的情况，当文件输入为空时，同一行直接崩溃我的浏览器！ （我只在Firefox中检查过，但无论是在我的实际脚本中还是在浏览器控制台中，它都会一直发生。）不幸的是，“检查是否存在文件”操作是可识别但不可判定的操作实际上是无用的。那我怎么知道bgImg字段是否为空？

I realize I can also just check the form's elements['bgImg'].files object, but the FormData API is already there, and it's neater, and it would be easier if it weren't apparently fatally borked! So am I missing something? If this is somehow the wrong way to use the putatively convenient FormData object, then what the hell am I supposed to be doing instead? Is checking the files collection actually the only solution?

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

EDIT: Further investigation reveals that this API has pretty poor support in browsers other than Firefox, so actually checking element.files is probably the better solution. I'm still baffled as to why this would be crashing the browser in Firefox, though. If an answer on that front is not shortly forthcoming, I'll probably submit my own answer.

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

2 个解决方案

#1

This behavior of the FormData API in Firefox seems like it may be a bug, unfortunately. However, given the rather minimal support for the FormData methods across browsers, the better solution is probably to check the form elements anyway:

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

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

#2

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