HTML5+AJAX原生分塊上傳文件的關鍵參數設置

processData:false

這是jquery.ajax的一個參數。默認值為true，表示會將非字符串對象自動變成k1=v1&k2=v2的形式，例如一個數組參數{d:[1,2]}，到服務端后會變成d[]=1&d[]=2的形式。

要將其設置為false后，才能上傳ArrayBuffer對象，服務端直接從Request.InputStream獲取原始字節流。

w3school解釋：

 

processData

類型：Boolean

默認值: true。默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。

 

 

 

主要代碼：（以下代碼是在FileReader的異步方法的ReadAsArrayBuffer的完成事件onload中調用，this指向當前reader）

$.ajax('/Home/File',
                    {
                        data: this.result,
                        type: 'POST',
                        processData: false,
                        success: function (res) {
                            console.log(res);
                        },
                        error: function (err) {
                            console.log(err);
                        }
                    });

服務端接受文件類內容：

var stream = Request.InputStream;

 由於只有HTML5才有FileReader對象，所以只有HTML5才支持JS原生分塊上傳文件。

上一篇使用基於WebSocket原生分塊上傳文件的方式同樣只支持HTML5。

由於http1.1 默認keep-live屬性，並不會每次請求重新建立連接。所以在服務端無法使用websocket的情景，但是客戶端由支持html5的情況，可以采用ajax原生分塊上傳。