jQuery监听文件上传实现进度条效果的方法
原理：
给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程
varxhr=newXMLHttpRequest();xhr.upload.onprogress=function(e){}
因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法
所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现
首先封装一个方法传入一个监听函数返回一个绑定了监听函数的XMLHttpRequest对象
varxhrOnProgress=function(fun){
xhrOnProgress.onprogress=fun;//绑定监听
//使用闭包实现监听绑
returnfunction(){
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
varxhr=$.ajaxSettings.xhr();
//判断监听函数是否为函数
if(typeofxhrOnProgress.onprogress!=='function')
returnxhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if(xhrOnProgress.onprogress&&xhr.upload){
xhr.upload.onprogress=xhrOnProgress.onprogress;
}
returnxhr;
}
}
上传时使用$.ajax方法
$.ajax({
url:url,
type:'POST',
xhr:xhrOnProgress(function(e){
varpercent=e.loaded/e.total;//计算百分比
})
});
使用HW.js文件上传工具自带进度条效果支持绑定自定义监听函数，支持上传实时预览（HTML5实现无需服务器）HW.js
<divid="cover"class="HW_upload">请选择要上传的文件</div>
<script>
varupload=newHW.Widget.upload.Create({
target:'#cover',//指定上传控件
url:"/upload.php",//上传地址
//设置允许上传的文件大小单位为kb默认为4096
maxSize:2048,
//开启多文件上传
mult:false,
//设置上传按钮的文字
uploadText:'请选择要上传的文件',
//设置上传超时限制单位为分钟默认为20分钟
timeout:20,
//设置允许上传的文件类型默认为['png','jpg','jpeg']
//accept:['jpg'],
//设置文件上传参数名默认为HW_upload_input
inputName:'cover',
//设置控件为图片上传默认为true为false时则不开启文件预览
isImage:true,
//自定义文件检查函数默认检测文件大小类型
//fileCheck:function(file){returntrue;},
viewSize:[500,300],//设置图片预览框宽高默认为400，300
viewImageWidth:70,//设置预览图片宽度默认为80
done:function(data){
alert(data);//获得上传结束后服务器返回的数据
}
});
以上就是小编为大家带来的jQuery监听文件上传实现进度条效果的方法全部内容了，希望大家多多支持毛票票~