Ajax request not working in IE10 when form contains file

Question

I used jQuery Malsup plugin to post form data in ajax. http://malsup.com/jquery/form/#api

The form contains both text data and file data (an image upload field). I used ajaxSubmit() to post form data. All data is processed in php in server site.

It works fine in chrome, FF, IE8, IE9. If i do not select any image upload field, ajax request works fine IE10. But when an image is selected IE10 shows pending in its dev tools.

You can test file upload functionality here.

http://malsup.com/jquery/form/#file-upload

Answer 1

Regardless whether the form is submitted via GET or POST, IE has no means to convert the file data into a string of text that can be transmitted to the server.

In order to perform a File POST without reloading the page, you'll need the following objects: FormData, XHR.upload, File.files. "XHR" is the xmlHTTPRequest object, "File" is the DOM instance of a file selector.

You can fall back to a regular form POST if any of the above is unsupported:

if (!self.FormData||!xhr.upload||document.getElementById('file').files) {
  document.getElementById('form').submit();
  return;
}

Then the form data is fetched as follows:

var fd=new FormData();
fd.append('file',document.getElementById('file').files[0]);
xhr.open('POST',...); //complete your Ajax post here
xhr.send(fd); //the form data is sent here, with the file

Now that I have explained the mechanism of an Ajax file POST, it's possible that your plugin is already handling browsers that cannot have Level 2 XHR features. When you embed the plugin, make sure it's inside an iFrame. If you'd like to notify the main page when the file is fully uploaded, in the upload handler itself, embed a JavaScript call:

parent.doneuploading();

, where doneuploading is a JavaScript function that's defined in the containing page.

It's also worth noting that

enctype="multipart/form-data"

in the form tag.