Загрузка файла jQuery не отправляет файл в IE9

У меня есть такая проблема только в IE < 10. Мои источники:

$("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);
    }
});

Вызывается обработчик "send" и обработчик "error".

Я поймал свою просьбу в Fiddler. Он не имеет Content-Type и любых данных:

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: ...

Я попытался проверить процесс загрузки на http://blueimp.github.io/jQuery-File-Upload/. Он отлично работает в IE9. Почему это не работает в моем случае?

Ответ 1

Я решил эту проблему. Сначала я решил проблему с полезной нагрузкой multipart/form-data. IE9 не поддерживает загрузку XHR файлов. Поэтому я добавил следующий script:

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

Также я добавил еще один script специально для IE9:

<!--[if lt IE 10]>
<script src="~/Scripts/jquery.xdr-transport.js"></script>
<![endif]-->

Теперь браузер загружает файл. Но я столкнулся с другой проблемой. На этот раз у меня была такая проблема . Я использую Web API, и я нашел это решение, которое помогло мне.

Но теперь вместо 'done' вызывается обработчик 'error'. Для решения этой проблемы мы должны установить dataType на "json". Окончательная версия выглядит так:

$("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);
    }
});

Ответ 2

Проблема для меня заключалась в том, что IE9 не отправляет файл, если вы запускаете входной файл через JS, пользователю на самом деле нужно нажать кнопку обзора, чтобы он работал.