jquery - Difference between Javascript new FormData and HTML form with (form).serializeArray()? - Stack Overflow

admin管理员组

文章数量:1300045

It seems like the Newly added FormData class in Javascript is getting rampant on line. Mostly when targeting multiple file uploads with Ajax. But some how it has some patibility issues with most of IE if not 10+...

Should I have an HTML like:

<form id="normalForm" enctype="multipart/form-data" onSubmmit="gaga()">

<input name="aFile" id="aFile" type="file" multiple/>

<input type="button" value="go">

</form>

and the normal javaScript:

function gaga {

var f= document.getElementById("normalForm");
/// do something
}

or the a function with the New FormData:

 function nGaga (){

    var f= new FormData()
        f.append("aFile", fileInputElement.files[0])

/// and whatever else to be appended

    }

After going through some reading, i somehow learnt that, this is mostly used to generate "Key:value" object in Javascript. However, using jQuery, I could do somethinglike:

var f= $('#normalForm').serializeArray(); 

This will kinda give me the "Key:value" object.

So, why should one use the new FormData while dealing with XMLHTTPrequests despite it's issues? and what is the difference?

It seems like the Newly added FormData class in Javascript is getting rampant on line. Mostly when targeting multiple file uploads with Ajax. But some how it has some patibility issues with most of IE if not 10+...

Should I have an HTML like:

<form id="normalForm" enctype="multipart/form-data" onSubmmit="gaga()">

<input name="aFile" id="aFile" type="file" multiple/>

<input type="button" value="go">

</form>

and the normal javaScript:

function gaga {

var f= document.getElementById("normalForm");
/// do something
}

or the a function with the New FormData:

 function nGaga (){

    var f= new FormData()
        f.append("aFile", fileInputElement.files[0])

/// and whatever else to be appended

    }

After going through some reading, i somehow learnt that, this is mostly used to generate "Key:value" object in Javascript. However, using jQuery, I could do somethinglike:

var f= $('#normalForm').serializeArray(); 

This will kinda give me the "Key:value" object.

So, why should one use the new FormData while dealing with XMLHTTPrequests despite it's issues? and what is the difference?

• javascript
• jquery
• html
• xmlhttprequest
• multipartform-data

Share Follow asked Jul 20, 2013 at 6:24 ErickBestErickBest 4,69255 gold badges3232 silver badges4545 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Say for instance that you wanted to upload a PDF but also needed to include some user generated metadata along with it as JSON or XML (or anything really). With FormData not only can we upload Files and strings (which is already possible with HTML forms) but we can also upload Blobs which allow us to upload dynamically generated content and be able to specify the content-type:

document.getElementById('dropzone').ondrop = function(e){
  e.preventDefault();
  uploadFiles(e.dataTransfer.files);
};

function uploadFiles(files) {
  var nextId = 123;
  var xml = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>";
  var json = {
    title: "Hello World!",
    tags: ["pdf", "non-fiction", "literature"],
    token: "ABCeasyAs123"
  };

  files.forEach(function(file, i) {
    var formData = new FormData();
    var xhr = new XMLHttpRequest();
    json.id = nextId + i;

    formData.append("XML",  new Blob([ xml ], { type: "text/xml" });
    formData.append("JSON", new Blob([ JSON.stringify(json) ], { type: "application/json" }));
    formData.append("PDF",  file);

    xhr.open("POST", "/upload");
    xhr.upload.onprogress = function(event) {
      if (event.lengthComputable) {
        var progress = (event.loaded / event.total * 100 | 0);
        console.log('Upload #%d is %d% plete.', i+1, progress);
      }
    }
    xhr.send(formData);
  });
}

本文标签： jqueryDifference between Javascript new FormData and HTML form with (form)serializeArray()Stack Overflow