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

原理：
给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程
var xhr=new XMLHttpRequest（）; xhr.upload.onprogress=function（e）{}
因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法
所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现
首先封装一个方法传入一个监听函数返回一个绑定了监听函数的XMLHttpRequest对象

var xhrOnProgress=function（fun） {xhrOnProgress.onprogress = fun; //绑定监听//使用闭包实现监听绑return function（） {//通过$.ajaxSettings.xhr（）;获得XMLHttpRequest对象var xhr = $.ajaxSettings.xhr（）;//判断监听函数是否为函数if （typeof xhrOnProgress.onprogress ！== "function"）return xhr;//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去if （xhrOnProgress.onprogress && xhr.upload） {xhr.upload.onprogress = xhrOnProgress.onprogress;}return xhr;}}

上传时使用$.ajax方法

$.ajax（{url: url,type: "POST",xhr:xhrOnProgress（function（e）{var percent=e.loaded / e.total;//计算百分比}）}）;

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

<div id="cover" class="HW_upload">请选择要上传的文件</div><script>var upload= new HW.Widget.upload.Create（{target:"#cover",//指定上传控件url:"/upload.php",//上传地址//设置允许上传的文件大小 单位为kb 默认为 4096maxSize:2048,//开启多文件上传mult:false,//设置上传按钮的文字uploadText:"请选择要上传的文件",//设置上传超时限制 单位为分钟 默认为20分钟timeout:20,//设置允许上传的文件类型 默认为["png","jpg","jpeg"]// accept:["jpg"],//设置文件上传参数名 默认为HW_upload_inputinputName:"cover",//设置控件为图片上传 默认为true 为false时则不开启文件预览isImage:true,//自定义文件检查函数 默认检测文件大小 类型// fileCheck:function（file）{return true;},viewSize:[500,300],//设置图片预览框宽高 默认为400，300viewImageWidth:70,//设置预览图片宽度默认为80done:function（data）{alert（data）;//获得上传结束后服务器返回的数据}}）;

以上就是小编为大家带来的jQuery监听文件上传实现进度条效果的方法全部内容了，希望大家多多支持脚本之家~