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 相关文章推荐
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
javascript数组详解
Oct 22 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
vue实现拖拽效果
Dec 23 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.ini中文版(1)
2006/10/09 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Python shutil模块用法实例分析
2019/10/02 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
航海技术专业毕业生推荐信
2014/07/09 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android