建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)如何解決HTML5中文件上傳插件遇到的技術(shù)問題 ，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)焦作,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
總結(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 xhrvar 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ù)，即不能通過。
關(guān)于“如何解決HTML5中文件上傳插件遇到的技術(shù)問題 ”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
分享題目：如何解決HTML5中文件上傳插件遇到的技術(shù)問題
文章起源：http://www.dlmjj.cn/article/igjiph.html
