欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery+formdata實(shí)現(xiàn)上傳進(jìn)度特效遇到的問題

 更新時間:2016年02月24日 10:10:40   投稿:hebedich  
這篇文章主要介紹了jQuery+formdata實(shí)現(xiàn)上傳進(jìn)度特效遇到的問題的相關(guān)資料,需要的朋友可以參考下

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

先貼上源碼:fileupload-html5.js(PS:公司使用seajs框架)

問題列表

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

2. XMLHTTPREQUEST(XHR)跨域

問題解答

1. JQUERY沒有給出ONPROGRESS事件的接口,必須從其他接口中找到原生XHR對象。

jQuery.ajax()返回的是jqXHR對象。jqXHR模仿XHR(原生),但沒有模仿實(shí)現(xiàn)XHR的所有方法和屬性(如:.upload),即使jqXHR增加了一個特有方法(如:.promise())。所以jqXHR并不是XHR的超集。

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

  readyState: 0,


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

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

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

xhr()返回值是XHR,提供給jQ使用,即發(fā)送數(shù)據(jù)就是用這個XHR。我們可以通過xhr創(chuàng)建一個回調(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沒有XHR對象用了
 }
});

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

xhrFields屬性指向jQ內(nèi)部創(chuàng)建的XHR,我們可以根據(jù)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)支持跨域,但需要后臺允許。

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

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

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

  • jQuery實(shí)現(xiàn)回車鍵(Enter)切換文本框焦點(diǎn)的代碼實(shí)例

    jQuery實(shí)現(xiàn)回車鍵(Enter)切換文本框焦點(diǎn)的代碼實(shí)例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)回車鍵(Enter)切換文本框焦點(diǎn)的代碼實(shí)例,需要的朋友可以參考下
    2014-05-05
  • jQuery實(shí)現(xiàn)手風(fēng)琴效果(蒙版)

    jQuery實(shí)現(xiàn)手風(fēng)琴效果(蒙版)

    這篇文章主要介紹了jQuery實(shí)現(xiàn)手風(fēng)琴效果,附帶蒙版特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • 基于JQUERY的兩個ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼

    基于JQUERY的兩個ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼

    基于JQUERY的兩個ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼,需要的朋友可以參考下。
    2011-05-05
  • 關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧

    關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧

    本篇文章介紹了,關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧。需要的朋友參考下
    2013-04-04
  • jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果

    jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果

    這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,非常具有實(shí)用價值,需要的朋友可以參考下
    2015-08-08
  • 詳談jQuery中的一些正則匹配表達(dá)式

    詳談jQuery中的一些正則匹配表達(dá)式

    下面小編就為大家?guī)硪黄斦刯Query中的一些正則匹配表達(dá)式。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • jQuery實(shí)現(xiàn)移動端手機(jī)商城購物車功能

    jQuery實(shí)現(xiàn)移動端手機(jī)商城購物車功能

    這篇文章主要介紹了jQuery實(shí)現(xiàn)移動端手機(jī)商城購物車功能的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-09-09
  • 分享一個自己動手寫的jQuery分頁插件

    分享一個自己動手寫的jQuery分頁插件

    本文主要是將自己動手些jquery分頁插件的思路和步驟分享給大家,本分頁插件功能很簡單,但是卻很實(shí)用,不想其他插件似的,功能一大堆。好了,廢話不多說,還是看正文吧
    2014-08-08
  • jackson解析json字符串,首字母大寫會自動轉(zhuǎn)為小寫的方法

    jackson解析json字符串,首字母大寫會自動轉(zhuǎn)為小寫的方法

    下面小編就為大家分享一篇jackson解析json字符串,首字母大寫會自動轉(zhuǎn)為小寫的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • 最新評論