HTML5 ファイル アップロード プラグインで発生した技術的問題

HTML5を実行する際に遭遇した技術的問題のまとめファイルアップロードプラグイン

まずソースコードを貼り付けます: fileupload-html5.js (追記:会社はseajsフレームワークを使用しています)

問題リスト

1. ajax はアップロードの進行状況 onprogress イベントを監視しません。

2. XMLHttpRequest (XHR) クロスドメイン

質問と回答

1. jQuery は onprogress イベントのインターフェイスを提供しないため、ネイティブ XHR オブジェクトは他のインターフェイスから見つける必要があります。

jQuery.ajax() は jqXHR オブジェクトを返します。 jqXHR は XHR (ネイティブ) を模倣しますが、jqXHR が独自のメソッド (.promise() など) を追加する場合でも、XHR を実装するすべてのメソッドと属性 (.upload など) を模倣するわけではありません。したがって、jqXHR は XHR のスーパーセットではありません。 //以下は jQ の内部ソース コードのインターセプトです、$.ajax(); はこの jqXHR (偽の XMLHttpRequest) を返します

// Fake xhr
    jqXHR = {
        readyState: 0,

XHR のアップロード属性は XMLHttpRequestUpload (IE10 は XMLHttpRequestEventTarget) を指します。このオブジェクトの onprogress イベントは、アップロードの進行状況を監視できます。 jQ はこの関数の API を提供していないため、jQ の一部のデータ アップロード メソッドは XHR を使用するため、他の API から XHR を見つけることができます。 XHR がデータを送信する前に onprogress イベントをバインドすると、アップロード進行状況関数を実装できます。

オプションのパラメーター構成から、XHR に関連する 2 つのプロパティを見つけました:

- xhr: XMLHttpRequest オブジェクトを作成するコールバック。

xhr() の戻り値は XHR であり、jQ が使用するために提供されます。つまり、この XHR はデータの送信に使用されます。 xhr を介して

コールバック関数

を作成してオーバーライドすることもできます。また、XHR を返しますが、ここで onprogress イベントをバインドします。 //jQ ソース コード

// Get a new xhrvar handle, i,    xhr = s.xhr();//[回调]在这里，下面是open方法// Open the socket// Passing null username, generates a login popup on Opera (#2865)if ( s.username ) {    xhr.open( s.type, s.url, s.async, s.username, s.password );} else {    xhr.open( s.type, s.url, s.async );}
所以我们应该这样做：
$.ajax({    //.....    xhr: function() {        var xhr = $.ajaxSettings.xhr();        //绑定上传进度的回调函数        xhr.upload.addEventListener('progress', progress, false);        return xhr;//一定要返回，不然jQ没有XHR对象用了    }});

- xhrFields: ネイティブ XHR オブジェクトを設定するために使用される、「ファイル名 - ファイル値」のペアで構成されるマッピング。

xhrFields 属性は、jQ によって内部的に作成された XHR を指し、xhrFields に基づいて XMLHttpRequest を取得できます。 xhrFields の値は json オブジェクトしか取り得ないため、以下の方法では取得できません。

//エラー例

$.ajax({
    //......
    xhrFields: {
        upload.onprogress: function() {
            //语法错误
        }
    }
});

次のように、XHR の onsendstart イベントを使用できます:

$.ajax({
    //......
    xhrFields: {
        onsendstart: function() {
            //this是指向XHR
            this.upload.addEventListener('progress', progress, false);
        }
    }
});

2. XMLHttpRequestⅡ (XHR) はクロスドメインをサポートしますが、バックグラウンド権限が必要です。

//バックグラウンドはヘッダー検証を送信する必要があります

if($_REQUEST['cros']) {
    header("Access-Control-Allow-Origin:请求的域名");
}

バックグラウンドによって提供されるインターフェイスに従って、パラメーター cros を追加する必要があります。しかし、このパラメータをファイルとともに送信すると、クロスドメイン制限が要求されました。最後に、このパラメータを URL に入力します。

XHR には 2 つのクロスドメイン リクエストがあることがわかりました。1 つは、リクエストの宛先アドレスに基づいて、ブラウザが自動的にオプション リクエストを発行することです。合格すると、カスタマイズされた

投稿リクエスト
を発行できます。したがって、post リクエストにパラメータを入力します。最初のリクエストには cro パラメータがありません。つまり、渡すことができません。

以上がHTML5 ファイル アップロード プラグインで発生した技術的問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。