web-dev-qa-db-ja.com

IE 8/9のFormDataのフォールバック

FormData はIE 8/9には存在しませんが、これらのブラウザーでその機能が必要です。これにいいフォールバックはありますか？

JSONデータを送信しようとしますが、ファイルをサーバーに渡す必要があります。最新のブラウザでformDataにこのファイルを追加し、XHRリクエストを送信するだけです。 FormDataはIE 8/9に存在しないため、明らかに失敗します。

// I cant seem to get this to work with a file.
$.ajax({
    url: '/genericHandlers/UploadDocsFile.ashx',
    type: "POST",
    data: model.toJSON(),
    contentType: 'application/json'
    }).done(function  (data) { 
       log('stuff happened!');
    });

たぶん、別の方法はjsで偽のフォームオブジェクトを作成し、それにデータを追加することですか？

javascriptajaxxmlhttprequestfileapi
32
Mike Fielden

可能な解決策は1つしかありませんが、IEのフォールバックは実際には1-1ではありません。 FormDataを使用する最新のブラウザのように、古いブラウザでは入力フィールドをバインドできないため、ファイルを送信するための可能な通信APIはありません。ただし、iframeを使用してフォーム全体を送信できます。この場合、XHR DataFormおよびiframeをサポートする jquery.form プラグインを使用できます（ブラウザーがFormData APIをサポートしていない場合、データはiframeで送信されます）。

8
Dmitry Polushkin

XMLHttpRequestsを使用してファイルを手動で送信できます。これには多くの情報があります here 。

ブラウザが最初にFormDataオブジェクトを使用できるかどうかをテストできます：

if(typeof FormData !== 'undefined')
   ...

MDNには この関数 があり、これをフォールバック用に変更できます。

var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var urlEncodedDataPairs = [];
var name;

// We turn the data object into an array of URL encoded key value pairs.
for(name in data) {
  urlEncodedDataPairs.Push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}

// We combine the pairs into a single string and replace all encoded spaces to 
// the plus character to match the behaviour of the web browser form submit.
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
4
99 Problems - Syntax ain't one

この回答は、あなたが尋ねた質問に厳密には対応していません。そのため、MODがそれを削除するかどうかを理解しています。

しかし、あなたの質問は、FormData（）を介してドラッグアンドドロップアップロードを提供する方法である古いブラウザのグレースフルデグラデーションである私が調査していた問題に密接に関連していました？

dropzone.js という素晴らしいライブラリがあり、これが私の問題に対する完璧な解決策を提供します。おそらく最良の部分は、古いブラウザでのファイルのアップロードをサポートするために、ライブラリがすぐに使えるグレースフルデグラデーションを提供することです 詳細はこちら 。

ソースを言い換えるには：

幸い、ブラウザーがサポートされていない場合、dropzone.jsライブラリーは、入力フィールドと送信ボタンを含むカスタマイズ可能なフォールバッククラスを表示します。

この情報が、私のような、ファイルのアップロードのための実装が簡単でエレガントなソリューションを探している人に役立つことを願っています。

0
Jade Steffen