HTML5+AJAX原生分块上传文件的关键参数设置

时间:2024-09-29 16:34:20

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