首页 > web前端 > js教程 > jQuery formdata实现上传进度特效遇到的问题_jquery

jQuery formdata实现上传进度特效遇到的问题_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-05-16 15:14:03
原创
1506 人浏览过

总结我做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的超集。

1

2

3

4

5

//下面是截取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事件。

1

2

3

4

5

6

7

8

9

10

11

12

//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 );

}

登录后复制

所以我们应该这样做:

1

2

3

4

5

6

7

8

9

$.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对象,所以不能以下面方式获取。

1

2

3

4

5

6

7

8

9

//错误例子

$.ajax({

 //......

 xhrFields: {

  upload.onprogress: function() {

   //语法错误

  }

 }

});

登录后复制

我们可以借助XHR的onsendstart事件,如下:

1

2

3

4

5

6

7

8

9

$.ajax({

 //......

 xhrFields: {

  onsendstart: function() {

   //this是指向XHR

   this.upload.addEventListener('progress', progress, false);

  }

 }

});

登录后复制

2. XMLHTTPREQUESTⅡ(XHR)支持跨域,但需要后台允许。

1

2

3

4

//后台需发送头部验证

if($_REQUEST['cros']) {

 header("Access-Control-Allow-Origin:请求的域名");

}

登录后复制

根据后台给的接口,我需要增加一个参数cros。但我将这个参数与文件同事提交,却提示跨域限制。最后将这个参数放在url才行。

原来XHR跨域是有两次请求的,第一次是验证请求,浏览器根据请求目的地址自动发出options请求。若通过,才能发出自定义的post请求。所以将参数放在post请求里,第一次请求没有cros参数,即不能通过。

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
引入jQuery 文件
来自于 1970-01-01 08:00:00
0
0
0
jquery笔记哪里有下?
来自于 1970-01-01 08:00:00
0
0
0
javascript - vue+webpack怎么引入jquery
来自于 1970-01-01 08:00:00
0
0
0
php+jquery的问题
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板