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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
js实现表格筛选功能
Jan 18 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 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更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
YII框架http缓存操作示例
2019/04/29 PHP
Smarty模板配置实例简析
2019/07/20 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python中while循环语句用法简单实例
2015/05/07 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python实现自动上京东抢手机
2018/02/06 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python 切分数组实例解析
2019/11/07 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
土木工程个人自荐信范文
2013/11/30 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
会走路的树教学反思
2014/02/20 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python