Question

13

jQuery File Upload doesn't send a file in IE9

rated 0 times [ 17] [ 4] / answers: 1 / hits: 20614 / 10 Years ago, wed, june 4, 2014, 12:00:00

I have got such problem only in IE < 10. My sources:

$(input:file#upload-photo).fileupload({

    enctype: multipart/form-data,

    url: $(input:file#upload-photo).attr(url),

    autoUpload: true,

    send: function() {

        spinner.spin(target);

    },

    done: function (e, data) {

        spinner.spin(false);



        var errors = data.result.Errors;

        if (errors != null && errors.length > 0) {

            for (var i = 0; i < errors.length; i++) {

                var ul = $(<ul>).html(<li> + errors[i] + </li>);

                $('#upload_photo_errors').html(ul);

            }

        } else {

            $(.profile-photo).attr(src, data.result.Data.AvatarUrl);

        }

    },

    error: function() {

        spinner.spin(false);

    }

});

The 'send' handler is invoked and the 'error' handler is too.

I caught my request in Fiddler. It has no Content-Type and any data:

POST http://172.20.40.45/site/api/Users/Avatar HTTP/1.1

X-Requested-With: XMLHttpRequest

Accept: */*

Referer: http://172.20.40.45/site/Profile/Edit

Accept-Language: ru

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

Host: 172.20.40.45

Content-Length: 0

DNT: 1

Connection: Keep-Alive

Pragma: no-cache

Cookie: ...

I have tried to check the uploading proccess on the http://blueimp.github.io/jQuery-File-Upload/. It works fine in IE9. Why does it not work in my case?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

briza

Add To Favorites

Follow

Total Points: 259

Total Questions: 94

Total Answers: 101

Location: Reunion

Member since Mon, Dec 28, 2020

4 Years ago

answered 10 Years ago beatrices · Accepted Answer

I have solved this issue.
At first I solved the problem with multipart/form-data payload. IE9 doesn't support XHR file upload. Therefore I added next script:

<script src=~/Scripts/jquery.iframe-transport.js></script>

Also I added another script specially for IE9:

<!--[if lt IE 10]>

<script src=~/Scripts/jquery.xdr-transport.js></script>

<![endif]-->

Now the browser uploads the file. But I faced another problem. This time I had such problem. I use Web API and I found this solution which helped me.

But now the 'error' handler is invoked instead of 'done'. For solving this issue we must set dataType to 'json'. The final version looks so:

$(input:file#upload-photo).fileupload({

    dataType: json,

    url: $(input:file#upload-photo).attr(url),

    autoUpload: true,

    send: function() {

        spinner.spin(target);

    },

    done: function (e, data) {

        var errors = data.result.Errors;

        if (errors && errors.length) {

            var items = $.map(errors, function (i, error) {

                return $(<li>).text(error);

            });

            $(<ul>).append(items).appendTo('#upload_photo_errors');

        } else {

            $(.profile-photo).attr(src, data.result.Data.AvatarUrl);

        }

    },

    always: function() {

        spinner.spin(false);

    }

});