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のスーパーセットではありません.

//     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パラメータがなく、通過できません.