如何解決HTML5中文件上傳插件遇到的技術問題

這篇文章將為大家詳細講解有關如何解決HTML5中文件上傳插件遇到的技術問題 ，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

總結我做HTML5文件上傳插件遇到的技術問題

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

問題列表

1. jquery.ajax沒有監聽上傳進度的onprogress事件。

2. XMLHttpRequest(XHR)跨域

問題解答

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

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

//下面是截取jQ內部的源碼，$.ajax();返回的就是這個jqXHR（偽造XMLHttpRequest）

// Fake xhr
    jqXHR = {
        readyState: 0,

XHR的upload屬性指向XMLHttpRequestUpload（IE10是XMLHttpRequestEventTarget），該對象的onprogress事件可以監聽上傳進度。既然jQ沒有給出這個功能的api，但jQ某些數據上傳方式是使用XHR的，所以我們可以從其它api中找到XHR。在XHR發送數據之前綁定onprogress事件可以實現上傳進度功能。

我從options參數配置中找到兩個與XHR有關的屬性：

- xhr：回調創建XMLHttpRequest對象。

xhr()返回值是XHR，提供給jQ使用，即發送數據就是用這個XHR。我們可以通過xhr創建一個回調函數覆蓋它，同樣返回XHR，但在此綁定onprogress事件。

//jQ源碼

// Get a new xhrvar 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獲得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)支持跨域，但需要后臺允許。

//后臺需發送頭部驗證

if($_REQUEST['cros']) {
    header("Access-Control-Allow-Origin:請求的域名");
}

根據后臺給的接口，我需要增加一個參數cros。但我將這個參數與文件同事提交，卻提示跨域限制。最后將這個參數放在url才行。
原來XHR跨域是有兩次請求的，第一次是驗證請求，瀏覽器根據請求目的地址自動發出options請求。若通過，才能發出自定義的post請求。所以將參數放在post請求里，第一次請求沒有cros參數，即不能通過。

關于“如何解決HTML5中文件上傳插件遇到的技術問題 ”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。