//ajax异步上传
$.ajax({
url: "${pageContext.request.contextPath }/upload",
type: "POST",
data: formData,
xhr: function(){ //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数 myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ //检查upload属性是否存在
//绑定progress事件的回调函数
myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
}
return myXhr; //xhr对象返回给jQuery使用
},
success: function(result){
$("#result").html(result);
},
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false //必须false才会避开jQuery对 formdata 的默认处理
});
//上传进度回调函数:
function progressHandlingFunction(e) {
if (e.lengthComputable) {
$('#progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条
var percent = e.loaded/e.total*100;
$('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
$('#progress').css('width', percent.toFixed(2) + "%");
}
}

jQuery 实现下载进度条的更多相关文章

  1. PHP持续保有长连接,利用flush持续更新浏览器UI,下载进度条实现

    如何用PHP+JS实现上传进度条,大部分的人可能都实现过,但是下载呢?如何呢?原理也是差不多的,就是分次读写,每次读多少字节,但是这样的不好就是长连接,一般实现下载进度条常用的两种解决方案是:一种是需 ...

  2. 用 CALayer 定制下载进度条控件

    // // RPProgressView.h // CALayer定制下载进度条控件 // // Created by RinpeChen on 16/1/2. // Copyright © 2016 ...

  3. 用CALayer实现下载进度条控件

    用CALayer实现下载进度条 效果: 源码: // // ViewController.m // ProgressView // // Created by YouXianMing on 14/11 ...

  4. CodePush自定义更新弹框及下载进度条

    CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...

  5. python 之实现断点下载与下载进度条

    一.效果图 二.进度条代码 __author__ = 'Yang' import os import time from threading import Thread '''下载进度条''' cla ...

  6. xmlHttpRequest 跨域和上传或下载进度条

    跨域 XMLHttpRequest 请求 普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可, ...

  7. jquery——彩色投票进度条

    一.需求 如下图 重点是要实现进度条. 二.分析 html5新增及删除标签一文中提到过html5新增了progress标签.但是肯定有兼容性问题.生成环境不适用,所以要模拟实现. 原理:动态设置< ...

  8. HTML5 CSS3 诱人的实例 : 网页载入进度条的实现,下载进度条等

    今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

  9. JQuery实战——页面进度条效果

    今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...

随机推荐

  1. sql大数据多条件查询索引优化

    此优化的前提可以称之为最近流行的头条人物“许三多”,总数据多,查询条件多,返回列多 优化前分页查询内部select列为需要的全部列,优化后内部select只返回ID主键,外部查询关联原数据表,然后查出 ...

  2. Python学习---抽屉框架分析[ORM操作]180314

    Django ORM操作     1. 字段操作         class User(model.Model);             u=字段        用处:            1 . ...

  3. 通过Windows Server 2008 R2建立iSCSI存储

    名词解释:iSCSI技术是一种由IBM公司研究开发的,是一个供硬件设备使用的可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行 SCSI协议,使其能够在诸如高速千兆以太网上 ...

  4. 乘风破浪:LeetCode真题_013_Roman to Integer

    乘风破浪:LeetCode真题_013_Roman to Integer 一.前言 上一节我们讨论了如何把阿拉伯数字转换成罗马数字,现在我们需要思考一下如何把罗马数字转换成阿拉伯数字,其实我们仔细观擦 ...

  5. VS 2012 在 windows 8 中无法使用 Deubgger.Lunch() 对服务进行调试

    找到了外文资料:   Debugger.Launch() not displaying JIT debugger selection popup on Windows 8/8.1   If execu ...

  6. 用timer自定义计划任务时间

    应业务需求,需要将指定程序,按照指定时间进行运行, 而windows计划任务最小运行间隔时间为1分钟,完全不能满足当前需求, 有两种方案,一种是安装win服务方式,考滤到维护困难,另一种是timer方 ...

  7. Web Service超限

    问题现状: {System.ServiceModel.CommunicationException: An error occurred while receiving the HTTP respon ...

  8. jquery ui tabs(选项卡)插件

    参考文档:http://www.css88.com/jquery-ui-api/tabs/ html代码: <div id="tabs"> <ul> < ...

  9. 团队作业—预则立&&他山之石(人月神教)

    1.团队任务 GitHub issues 1.2 团队计划 2.访谈任务 2.1采访对象 采访团队:龙威零式 采访时间:2017.10.23 采访形式:微信群 2.2采访内容 问:你们选题的时候有哪些 ...

  10. python30 excel修改模块xlutils

    xlrd只读,xlwt只写,xlutils模块则将读写功能结合起来.https://pypi.org/project/xlutils/ 修改excel通过xlutils的copy函数将<clas ...