web-dev-qa-db-ja.com

IE9で動作するajaxを使用したファイル/ファイルのアップロードの送信

IE9でサポートされているajaxを使用してファイルをアップロードする必要があります。前述のように、FormDataを使用していました here 。私のコードは次のようになります：

var files = new FormData();
JQuery.each($('#file')[0].files, function (i, file) {
    files.append('file', file);
});

$.ajax({
    type: "POST",
    url: '/url',
    cache: false,
    contentType: false,
    processData: false,
    data: files,
    ...
});

これはSafariとFirefoxでは正常に機能しますが、IE9ではFormDataがサポートされていないため、IE9では失敗します。次のように設定して、ファイルとして送信してみました。

data: $('#file')[0].files[0]
contentType: 'multipart/form-data'

データがURLエンコードされた形式で送信され、Java側で解析できないため、これは失敗します。これを解決する方法についてのヘルプやポインタは非常に高く評価されます。動作するものが必要ですすべてのブラウザで。

編集：ファイルは通常小さいので、アップロードの進行状況バーは必要ありません。複数のファイルをアップロードする必要はありません。ファイルを1つアップロードするだけです。

jqueryajaxinternet-explorerfile-uploadmultipartform-data
12
Alice

残念ながら、ファイルの送信にAjax（つまりXMLHttpRequest）を使用することはできませんが、_<iframe/>_と_<form method="post" enctype="multipart/form-data"/>_を含む_<input type="file"/>_を使用して、同様の動作を実装できます。ユーザーが選択したファイルを「自然な」方法で送信します。 JavaScriptを使用してform.submit()を呼び出し、親ドキュメントからその_<iframe/>_をポーリングして、ファイルのアップロードプロセスが完了したかどうかを確認できます。

jQueryには たくさんのクールなプラグイン があり、このジョブを実行するために 私のお気に入りのプラグイン があります。

18
Dan K.K.