How get the length of FormData object

Question

I'm using ajax to upload files. To pass and save the data I'm using the FormData object. I would like to show the length of the FormData object but I can not do it.

I tried in this ways

 var data = new FormData();
 jQuery.each($(this)[0].files, function(i, file) {
     data.append('img['+i+']', file);
 });

 /* FIRST */
 var getObjectSize = function(obj) {
    var leng = 0, key;
    for (key in obj) {
      if (obj.hasOwnProperty(key)) leng++;
    }
    return leng;
 };
 var items = getObjectSize(data);
 alert(items); // output 0

 /* SECOND */
 var items = Object.keys(data).length;
 alert(items); // output 0

How can I do this? Thanks.

score 2 · Accepted Answer · edited May 23 '17 at 12:32

Formdata looks like this , when you use console.log(formData),

FormData {
     append: function
 }
 __proto__: FormDataappend: function append() {
     [native code]
 }
 arguments: nullcaller: nulllength: 2name: "append"
 __proto__: function Empty() {}
 apply: function apply() {
     [native code]
 }
 arguments: nullbind: function bind() {
     [native code]
 }
 call: function call() {
     [native code]
 }
 caller: nullconstructor: function Function() {
     [native code]
 }
 length: 0name: "Empty"
 toString: function toString() {
     [native code]
 }
 __proto__: Object < function scope > < function scope > Global: Windowconstructor: function FormData() {
     [native code]
 }
 __proto__: Object__defineGetter__: function __defineGetter__() {
     [native code]
 }
 __defineSetter__: function __defineSetter__() {
     [native code]
 }
 __lookupGetter__: function __lookupGetter__() {
     [native code]
 }
 __lookupSetter__: function __lookupSetter__() {
     [native code]
 }
 constructor: function Object() {
     [native code]
 }
 hasOwnProperty: function hasOwnProperty() {
     [native code]
 }
 isPrototypeOf: function isPrototypeOf() {
     [native code]
 }
 propertyIsEnumerable: function propertyIsEnumerable() {
     [native code]
 }
 toLocaleString: function toLocaleString() {
     [native code]
 }
 toString: function toString() {
     [native code]
 }
 valueOf: function valueOf() {
     [native code]
 }
 get __proto__: function __proto__() {
     [native code]
 }
 set __proto__: function __proto__() {
     [native code]
 }

So, There is no getting of interrogating with the data that has been stored to FormData. And, The official document mention the same.

So, instead of that why not fetch the length , by directly counting file numbers

var length=$(this).get(0).files.length

P.S : And you can get more detail though this question/answer.

Actually the "official" document is here: https://dvcs.w3.org/hg/xhr/raw-file/default/xhr-1/Overview.html#interface-formdata, or here: https://xhr.spec.whatwg.org/#interface-formdata, the latter of which does have an iterator defined on the interface. However, it would appear as though browsers have not implemented the WHATWG specification. It should be noted that neither of these specs are complete. The MDN, while a great resource, is not a normative source. — Heretic Monkey, Jan 21 '15 at 17:35

score 2 · Answer 2 · answered Jun 17 '22 at 09:18

2

New in Chrome 50+ and Firefox 39+ (resp. 44+):

Array.from(formdata.keys()).length

answered Jun 17 '22 at 09:18

Sophie Su

73
1
3

score 0 · Answer 3 · answered Nov 20 '15 at 08:10

Here's some proof of concept code to Drag and Drop files into FormData and upload via POST to a server. It includes a simple example of checking file size before uploading. I also made a JS Bin where you can experiment and see what data is inside of a FormData object if it helps.

score 0 · Answer 4 · answered Jun 04 '18 at 08:37

0

Maybe you can use this:

checkHasFile() {
  var i = 0;
  for (var value of this.files.values()) {
    i++;
  }
  return i;
},

answered Jun 04 '18 at 08:37

Jeremy Su

781
1
6
12

How get the length of FormData object

4 Answers4

P.S : And you can get more detail though this question/answer.