jQuery监听文件上传实现进度条效果的方法

前端之家收集整理的这篇文章主要介绍了jQuery监听文件上传实现进度条效果的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原理:

给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程

var xhr=new XMLHttpRequest(); xhr.upload.onprogress=function(e){}

因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法

所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现

首先封装一个方法 传入一个监听函数 返回一个绑定了监听函数的XMLHttpRequest对象

函数是否为函数 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; } }

上传时使用$.ajax方法

使用HW.js文件上传工具 自带进度条效果 支持绑定自定义监听函数支持上传实时预览(HTML5实现 无需服务器)HW.js

上传的文件

猜你在找的jQuery相关文章