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


Posted in Javascript onFebruary 24, 2016

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

Javascript 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
JQuery EasyUI的使用
Feb 24 #Javascript
使用jQuery监听DOM元素大小变化
Feb 24 #Javascript
JavaScript中的闭包
Feb 24 #Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 #Javascript
jquery中键盘事件小结
Feb 24 #Javascript
javascript实现九宫格相加数值相等
May 28 #Javascript
Javascript类型转换的规则实例解析
Feb 23 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php查看网页源代码的方法
2015/03/13 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python中的localtime()方法使用详解
2015/05/22 Python
Python抽象类的新写法
2015/06/18 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python远程连接MySQL数据库
2019/04/19 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
法律专业实习鉴定
2013/12/22 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
报关报检委托书
2014/04/08 职场文书
园林技术专业求职信
2014/07/28 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript