先贴上源码：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 xhrvar 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参数，即不能通过。
以上就是html5文件上传插件遇到的技术问题 的详细内容。