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原生分块上传。