DDR爱好者之家

jQuery监听文件上传实现进度条效果的方法
站长资源 2024/11/28 佚名
11 1538
DDR爱好者之家 Design By 杰米

原理：

给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 默认为 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);//获得上传结束后服务器返回的数据
  }
});

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米