jQuery+formdata实现上传进度特效遇到的问题
前端之家收集整理的这篇文章主要介绍了
jQuery+formdata实现上传进度特效遇到的问题，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_404_0@总结我做HTML5文件上传插件遇到的技术问题
@H_
404_0@先贴上源码：<a target="
blank" href="http://https//github.com/epooren/FileUpload/blob/master/src/test/fileupload-html5.js">fileupload-html5.js（PS:公司使用seajs框架）
@H4040@问题列表
@H404_0@1. JQUERY.AJAX没有监听
上传进度的ONPROGRESS事件。
@H_
4040@2. XMLHTTPREQUEST(XHR)跨域
@H4040@问题解答
@H4040@1. JQUERY没有给出ONPROGRESS事件的接口，必须从其他接口中找到原生XHR对象。
@H404_0@jQuery.ajax()返回的是jqXHR对象。jqXHR模仿XHR(原生)，但没有模仿实现XHR的所有
方法和
属性(如：.upload)，即使jqXHR
增加了一个特有
方法（如：.promise()）。所以jqXHR并不是XHR的超集。
<div class="jb51code">
<pre class="brush:js;">
//下面是
截取jQ内部的源码，$.ajax();返回的就是这个jqXHR（伪造XMLHttpRequest）
// Fake xhr
jqXHR = {
readyState: 0,
@H_
404_0@
XHR的upload
属性指向XMLHttpRequestUpload（IE10是XMLHttpRequestEventTarget），该对象的onprogress事件可以监听
上传进度。既然jQ没有给出这个
功能的api，但jQ某些数据
上传方式是使用XHR的，所以我们可以从其它api中找到XHR。在XHR发送数据之前绑定onprogress事件可以实现
上传进度
功能。
@H_
404_0@我从OPTIONS参数配置中找到两个与XHR有关的
属性：
@H_
404_0@- XHR：回调创建XMLHTTPREQUEST对象。
@H_
404_0@xhr()返回值是XHR，提供给jQ使用，即发送数据就是用这个XHR。我们可以通过xhr创建一个回调
函数覆盖它，同样返回XHR，但在此绑定onprogress事件。
方法
// 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.async );
}
@H_
404_0@所以我们应该这样做：
上传进度的回调
函数
xhr.upload.addEventListener('progress',progress,false);
return xhr;//一定要返回，不然jQ没有XHR对象用了
}
});
@H_
404_0@- XHRFIELDS：一对“
文件名-
文件值”组成的映射，用于设定原生的 XHR对象。
@H_
404_0@xhrFields
属性指向jQ内部创建的XHR，我们可以根据xhrFields获得XMLHttpRequest。由于xhrFields的值只能是json对象，所以不能以下面方式
获取。
错误例子
$.ajax({
//......
xhrFields: {
upload.onprogress: function() {
//语法
错误
}
}
});
@H_
404_0@我们可以借助XHR的onsendstart事件，如下：
@H_
404_0@2. XMLHTTPREQUESTⅡ(XHR)
支持跨域，但需要
后台允许。
后台需发送头部验证
if($_REQUEST['cros']) {
header("Access-Control-Allow-Origin:请求的域名");
}
@H_
404_0@根据
后台给的接口，我需要
增加一个参数cros。但我将这个参数与
文件同事提交，却
提示跨域限制。最后将这个参数放在url才行。
@H_
404_0@原来XHR跨域是有两次请求的，第一次是验证请求，浏览器根据请求目的地址
自动发出options请求。若通过，才能发出
自定义的post请求。所以将参数放在post请求里，第一次请求没有cros参数，即不能通过。
原文链接：https://www.f2er.com/jquery/49991.html
