web-dev-qa-db-ja.com

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では正常に動作します。私の場合、なぜそれが機能しないのですか？

javascriptjqueryinternet-explorerfile-uploadblueimp
12
Neshta

私はこの問題を解決しました。最初に、multipart/form-dataペイロードの問題を解決しました。 IE9はXHRファイルのアップロードをサポートしていません。したがって、次のスクリプトを追加しました。

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

また、IE9専用の別のスクリプトを追加しました。

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

これで、ブラウザがファイルをアップロードします。しかし、私は別の問題に直面しました。今回はそんな 問題 。私はWebAPIを使用していますが、 このソリューション が役に立ちました。

ただし、「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);
    }
});
20
Neshta

私にとっての問題は、JSを介してファイル入力をトリガーすると、IE9がファイルを送信しないことでした。ユーザーは、実際に参照ボタンをクリックして機能させる必要があります。

4
Functional Rocking