Upload image with jQuery form plugin not working in IE8

Question

I am using the jQuery form plugin in my MVC project to upload images.

Image loading works fine in Chrome and firefox, however, when it comes to IE 8.

Not like Chrome, instead of returning json data that is later consumed by the post-submit callback, in IE 8 it returns a txt file and asks if you want to download. and in the side of the txt file, this is json data.

couldn't understand where i did something wrong, any ideas?

early.

The code is placed in a separate js file: upload.js

(function ($) { ImageUploader = function (o) { var options = { success: showResponse, // post-submit callback url: "/Image/ImageUpload", // override for form 'action' attribute type: "post", // 'get' or 'post', override for form 'method' attribute dataType: 'json', // 'xml', 'script', or 'json' (expected server response type) clearForm: true // clear all form fields after successful submit }; o.ajaxForm(options); $("input#file").change(function () { o.submit(); }); // post-submit callback function showResponse(responseText, statusText, xhr, $form) { .... } }; })(jQuery); 

on the watch page:

 $(document).ready(function () { ImageUploader($("#ajaxUploadForm")); }); 

Answer 1

Well, after painfully digging on the Internet, I finally got my decision, more than happy to share it:

The jQuery Form plugin has no problems at all.

The problem is that IE 8 buggy was not able to handle the Json callback well enough. even you specified the type as "application / json"

Solution: change the content type from "application / json" to "text / plain" in MVC JsonResult

  return Json(newImage, "text/plain", JsonRequestBehavior.AllowGet);