这次给大家带来jquery+formdata做出上传进度特效（附步骤代码），jquery+formdata做出上传进度特效的注意事项有哪些，下面就是实战案例，一起来看一下。
问题列表
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参数，即不能通过。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery easyui插件怎么创建菜单链接按钮
jquery的jqurl插件使用详解
以上就是jquery+formdata做出上传进度特效（附步骤代码）的详细内容。