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 css float属性的特殊写法
Nov 13 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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保存和输出文件
2006/10/09 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Tesserocr库的正确安装方式
2018/10/19 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
财务会计专业个人求职信范本
2014/01/08 职场文书
骨干教师培训制度
2014/01/13 职场文书
毕业留言寄语大全
2014/04/10 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
欠款起诉书范文
2015/05/19 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python