总结我做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 xhr
var 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
参数,即不能通过。