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

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

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

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

Answer 1

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

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