CODEWITHSUNDEEP
jqueryajaxinternet-explorer
chanchal118
chanchal118

Reputation: 3647

Ajax request not working in IE10 when form contains file

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

Upvotes: 9

Views: 1327

Answers (2)

Schien
Schien

Reputation: 3903

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.

Upvotes: 1

Wez
Wez

Reputation: 240

I was having this same problem where my success function wouldn't be called on ajaxSubmit. I ended up looking at the jquery forms plugin code and line 65 forces your ajaxSubmit to use a GET if you haven't specified form method="post". If your form is fairly large the get will fail. So the work around is to use method="post" on your form element.

Upvotes: 0

Related Questions