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

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({  url: url,  type: 'POST',  xhr:xhrOnProgress(function(e){    var percent=e.loaded / e.total;//计算百分比  })});

<div id="cover" class="HW_upload">请选择要上传的文件</div><script>var upload= new HW.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){return true;},  viewSize:[500,300],//设置图片预览框宽高 默认为400，300  viewImageWidth:70,//设置预览图片宽度默认为80  done:function(data){    alert(data);//获得上传结束后服务器返回的数据  }});