總結(jié)我做HTML5文件上傳插件遇到的技術(shù)問(wèn)題

先貼上源碼：fileupload-html5.js（PS:公司使用seajs框架）

問(wèn)題列表

1. JQUERY.AJAX沒(méi)有監(jiān)聽(tīng)上傳進(jìn)度的ONPROGRESS事件。

2. XMLHTTPREQUEST(XHR)跨域

問(wèn)題解答

1. JQUERY沒(méi)有給出ONPROGRESS事件的接口，必須從其他接口中找到原生XHR對(duì)象。

jQuery.ajax()返回的是jqXHR對(duì)象。jqXHR模仿XHR(原生)，但沒(méi)有模仿實(shí)現(xiàn)XHR的所有方法和屬性(如：.upload)，即使jqXHR增加了一個(gè)特有方法（如：.promise()）。所以jqXHR并不是XHR的超集。

//下面是截取jQ內(nèi)部的源碼，$.ajax();返回的就是這個(gè)jqXHR（偽造XMLHttpRequest）
// Fake xhr
 jqXHR = {

  readyState: 0,

XHR的upload屬性指向XMLHttpRequestUpload（IE10是XMLHttpRequestEventTarget），該對(duì)象的onprogress事件可以監(jiān)聽(tīng)上傳進(jìn)度。既然jQ沒(méi)有給出這個(gè)功能的api，但jQ某些數(shù)據(jù)上傳方式是使用XHR的，所以我們可以從其它api中找到XHR。在XHR發(fā)送數(shù)據(jù)之前綁定onprogress事件可以實(shí)現(xiàn)上傳進(jìn)度功能。

我從OPTIONS參數(shù)配置中找到兩個(gè)與XHR有關(guān)的屬性：

- XHR：回調(diào)創(chuàng)建XMLHTTPREQUEST對(duì)象。

xhr()返回值是XHR，提供給jQ使用，即發(fā)送數(shù)據(jù)就是用這個(gè)XHR。我們可以通過(guò)xhr創(chuàng)建一個(gè)回調(diào)函數(shù)覆蓋它，同樣返回XHR，但在此綁定onprogress事件。

//jQ源碼
// Get a new xhr
var handle, i,
 xhr = s.xhr();//[回調(diào)]在這里，下面是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 );
}

所以我們應(yīng)該這樣做：

$.ajax({
 //.....
 xhr: function() {
  var xhr = $.ajaxSettings.xhr();
  //綁定上傳進(jìn)度的回調(diào)函數(shù)
  xhr.upload.addEventListener('progress', progress, false);
  return xhr;//一定要返回，不然jQ沒(méi)有XHR對(duì)象用了
 }
});

- XHRFIELDS：一對(duì)“文件名-文件值”組成的映射，用于設(shè)定原生的 XHR對(duì)象。

xhrFields屬性指向jQ內(nèi)部創(chuàng)建的XHR，我們可以根據(jù)xhrFields獲得XMLHttpRequest。由于xhrFields的值只能是json對(duì)象，所以不能以下面方式獲取。

//錯(cuò)誤例子
$.ajax({
 //......
 xhrFields: {
  upload.onprogress: function() {
   //語(yǔ)法錯(cuò)誤
  }
 }
});

我們可以借助XHR的onsendstart事件，如下：

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

2. XMLHTTPREQUESTⅡ(XHR)支持跨域，但需要后臺(tái)允許。

//后臺(tái)需發(fā)送頭部驗(yàn)證
if($_REQUEST['cros']) {
 header("Access-Control-Allow-Origin:請(qǐng)求的域名");
}

根據(jù)后臺(tái)給的接口，我需要增加一個(gè)參數(shù)cros。但我將這個(gè)參數(shù)與文件同事提交，卻提示跨域限制。最后將這個(gè)參數(shù)放在url才行。

原來(lái)XHR跨域是有兩次請(qǐng)求的，第一次是驗(yàn)證請(qǐng)求，瀏覽器根據(jù)請(qǐng)求目的地址自動(dòng)發(fā)出options請(qǐng)求。若通過(guò)，才能發(fā)出自定義的post請(qǐng)求。所以將參數(shù)放在post請(qǐng)求里，第一次請(qǐng)求沒(méi)有cros參數(shù)，即不能通過(guò)。