Upload image with Jquery form plugin not working in IE8

Question

I am using jQuery form plugin in my MVC project for image uploading.

The image upload works perfect in Chrome and firefox, however when it comes to IE 8.

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

couldn't figure out where did i do wrong, any ideas?

thanks in advance.

Code is placed in a seperated js file: upload.js

(function ($) {
ImageUploader = function (o) {

        var options = {


            success: showResponse,  // post-submit callback 

            url:    "/Image/ImageUpload",         // override for form's 'action' attribute 
            type:      "post",        // 'get' or 'post', override for form's '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 page view:

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

Answer 1

Well after a painful digging through the internet I finally got my solution, more than happy to share it:

the jQuery Form Plugin don't have problems at all.

the Problem is the buggy IE 8 couldn't handle Json callback well enough. even you specified the type as "application/json"

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

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