jQuery+formdataアップロードの進捗特効を実現する問題
2877 ワード
HTML 5ファイルアップロードプラグインで発生した技術的な問題をまとめます
まずソースコードを貼ります:fileupload-html 5.js(PS:会社はseajsフレームワークを使用)
質問リスト
1. JQUERY.AJAXはアップロードの進行状況のONPROGRESSイベントを傍受していない.
2.XMLHTTPREQUEST(XHR)ドメイン間
質問の回答
1.JQUERYはONPROGRESSイベントのインタフェースを与えず、他のインタフェースからオリジナルXHRオブジェクトを見つけなければならない.
jQuery.ajax()はjqXHRオブジェクトを返します.jqXHRは、XHR(オリジナル)を模倣しているが、jqXHRに特有の方法(例えば、.promise()が追加されたとしても、XHRを実装するすべての方法および属性(例えば:.upload)を模倣していない.だからjqXHRはXHRのスーパーセットではありません.
XHRのupload属性は、アップロードの進行状況をリスニングできるXMLhttpRequestUpload(IE 10はXMLhttpRequestEventTarget)を指します.jQはこの機能のapiを与えていない以上、jQのいくつかのデータアップロード方式はXHRを使用しているので、他のapiからXHRを見つけることができます.XHRがデータを送信する前にonprogressイベントをバインドすることで、アップロードの進捗機能を実現できます.
OPTIONSパラメータ構成から、XHRに関連する2つのプロパティを見つけました.
-XHR:コールバックXMLTTPREQUESTオブジェクトを作成します.
xhr()戻り値はXHRであり、jQに提供されて使用される.すなわち、送信データはこのXHRである.xhrでコールバック関数を作成して上書きし、同じようにXHRを返すことができますが、ここでonprogressイベントをバインドします.
私たちはこうすべきです
-XHRFIELDS:オリジナルのXHRオブジェクトを設定するための「ファイル名-ファイル値」のペアからなるマッピング.
xhrFieldsプロパティは、jQ内部で作成されたXHRを指し、xhrFieldsに基づいてXMLttpRequestを取得できます.xhrFieldsの値はjsonオブジェクトのみであるため、次のように取得できません.
XHRのonsendstartイベントを利用して、次のようにすることができます.
2.XMLHTTPREQUESTII(XHR)はドメイン間でサポートされていますが、バックグラウンドで許可する必要があります.
バックグラウンドから与えられたインタフェースに基づいて、パラメータcrosを追加する必要があります.しかし、私はこのパラメータをファイルの同僚に提出しましたが、ドメイン間の制限を提示しました.最後にこのパラメータをurlに置いてください.
XHRドメイン間では2回のリクエストがあったが,1回目は検証リクエストであり,ブラウザはリクエスト先アドレスに基づいて自動的にoptionsリクエストを発行する.通過すると、カスタムpostリクエストが発行されます.したがって、パラメータをpostリクエストに配置すると、最初のリクエストにはcrosパラメータがなく、通過できません.
まずソースコードを貼ります:fileupload-html 5.js(PS:会社はseajsフレームワークを使用)
質問リスト
1. JQUERY.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のupload属性は、アップロードの進行状況をリスニングできるXMLhttpRequestUpload(IE 10はXMLhttpRequestEventTarget)を指します.jQはこの機能のapiを与えていない以上、jQのいくつかのデータアップロード方式はXHRを使用しているので、他のapiからXHRを見つけることができます.XHRがデータを送信する前にonprogressイベントをバインドすることで、アップロードの進捗機能を実現できます.
OPTIONSパラメータ構成から、XHRに関連する2つのプロパティを見つけました.
-XHR:コールバックXMLTTPREQUESTオブジェクトを作成します.
xhr()戻り値はXHRであり、jQに提供されて使用される.すなわち、送信データはこのXHRである.xhrでコールバック関数を作成して上書きし、同じようにXHRを返すことができますが、ここでonprogressイベントをバインドします.
//jQ
// Get a new xhr
var 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に基づいてXMLttpRequestを取得できます.xhrFieldsの値はjsonオブジェクトのみであるため、次のように取得できません.
//
$.ajax({
//......
xhrFields: {
upload.onprogress: function() {
//
}
}
});
XHRのonsendstartイベントを利用して、次のようにすることができます.
$.ajax({
//......
xhrFields: {
onsendstart: function() {
//this XHR
this.upload.addEventListener('progress', progress, false);
}
}
});
2.XMLHTTPREQUESTII(XHR)はドメイン間でサポートされていますが、バックグラウンドで許可する必要があります.
//
if($_REQUEST['cros']) {
header("Access-Control-Allow-Origin: ");
}
バックグラウンドから与えられたインタフェースに基づいて、パラメータcrosを追加する必要があります.しかし、私はこのパラメータをファイルの同僚に提出しましたが、ドメイン間の制限を提示しました.最後にこのパラメータをurlに置いてください.
XHRドメイン間では2回のリクエストがあったが,1回目は検証リクエストであり,ブラウザはリクエスト先アドレスに基づいて自動的にoptionsリクエストを発行する.通過すると、カスタムpostリクエストが発行されます.したがって、パラメータをpostリクエストに配置すると、最初のリクエストにはcrosパラメータがなく、通過できません.