javascript - How do I check if a FormData file is empty? - Stack Overflow

admin管理员组

文章数量:1393920

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.

<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:

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.

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?

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?

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 forthing, I'll probably submit my own answer.

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.

<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:

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.

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?

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?

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 forthing, I'll probably submit my own answer.

• javascript
• ajax
• forms

Share Improve this question Follow edited Jul 23, 2015 at 22:44 endemic asked Jul 23, 2015 at 22:36 endemicendemic 19911 gold badge22 silver badges1414 bronze badges 6

• This is a good question. As far as I can see you can not check if a FormData is empty or has anything in it with the native methods. developer.mozilla/en-US/docs/Web/API/FormData – kockburn Commented Jul 23, 2015 at 22:49
• I guess, (element.files||element.value).length>0||element.file (or something like that) is the only solution… FormData get and getAll also crash my browser. Is there a bug report on Bugzilla for this already? Couldn’t find anything so far… – Sebastian Simon Commented Jul 24, 2015 at 0:58
• 1 I couldn't find one either, so I guess I'll submit one. Upon regaining my mon sense, I realized that no matter how terribly I'm abusing the API it probably shouldn't cause a browser crash, so a bug it must be. – endemic Commented Jul 24, 2015 at 1:26
• @endemic I’ve submitted one: bugzilla.mozilla/show_bug.cgi?id=1187157 – Sebastian Simon Commented Jul 24, 2015 at 1:32
• 1 The bug has been recently fixed. – Sebastian Simon Commented Jan 10, 2016 at 19:34

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 2

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:

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

eazy way:

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

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

本文标签： javascriptHow do I check if a FormData file is emptyStack Overflow