Post formdata via XMLHttpRequest object in JS ? ( cross browser)

Question

Im trying to post a form data in js :

I have this code :

var formData = new FormData();
  formData.append(\"username\", \"Groucho\");
  formData.ap         


        

Answer 1

I wrote a simple wrapper that you can use to send FormData in IE (and it won't mess up anything in webkit/gecko either). Simply include the following js before you try to use FormData:

var ieFormData = function ieFormData(){
if(window.FormData == undefined)
{
    this.processData = true;
    this.contentType = 'application/x-www-form-urlencoded';
    this.append = function(name, value) {
        this[name] = value == undefined ? "" : value;
        return true;
    }
}
else
{
    var formdata = new FormData();
    formdata.processData = false;
    formdata.contentType = false;
    return formdata;
}

}

Now simply switch all new FormData() calls to new ieFormData(), and switch

processData: false, 
contentType: false,

to

processData: formdata.processData,
contentType: formdata.contentType,
cache: false,

and you're all set. Of course, this won't allow you to include files (you still need the iframe hack), but it will allow you to mimic FormData in IE.

Answer 2

You didn't say which version of IE you're using. The formData object is not supported in IE9 or lower. XMLHTTPRequest2 (which contains the formData object) should be supported in IE10 (http://caniuse.com/xhr2)

Cross-browser AJAX file upload is very hard to do right now. You could try building your own form header/boundaries in Javascript (see answer here: XMLHttpRequest POST multipart/form-data) but, personally, I don't believe it is worth the effort.