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


Posted in Javascript onOctober 16, 2016

原理:

给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监听文件上传实现进度条效果的方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
React四级菜单的实现
Apr 08 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 #Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 #Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 #Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 #Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 #Javascript
JS实现禁止鼠标右键的功能
Oct 15 #Javascript
Vue.js快速入门实例教程
Oct 15 #Javascript
You might like
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP内核探索:变量概述
2014/01/30 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
python输出指定月份日历的方法
2015/04/23 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
python实现录音小程序
2020/10/26 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python中的协程深入理解
2019/06/10 Python
深入了解Django View(视图系统)
2019/07/23 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
财务部经理岗位职责
2014/02/03 职场文书
学生评语大全
2014/04/18 职场文书
2015年母亲节寄语
2015/03/23 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
给朋友的赠语
2015/06/23 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python