jQuery 实现下载进度条
//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 实现下载进度条的更多相关文章
- PHP持续保有长连接,利用flush持续更新浏览器UI,下载进度条实现
如何用PHP+JS实现上传进度条,大部分的人可能都实现过,但是下载呢?如何呢?原理也是差不多的,就是分次读写,每次读多少字节,但是这样的不好就是长连接,一般实现下载进度条常用的两种解决方案是:一种是需 ...
- 用 CALayer 定制下载进度条控件
// // RPProgressView.h // CALayer定制下载进度条控件 // // Created by RinpeChen on 16/1/2. // Copyright © 2016 ...
- 用CALayer实现下载进度条控件
用CALayer实现下载进度条 效果: 源码: // // ViewController.m // ProgressView // // Created by YouXianMing on 14/11 ...
- CodePush自定义更新弹框及下载进度条
CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...
- python 之实现断点下载与下载进度条
一.效果图 二.进度条代码 __author__ = 'Yang' import os import time from threading import Thread '''下载进度条''' cla ...
- xmlHttpRequest 跨域和上传或下载进度条
跨域 XMLHttpRequest 请求 普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可, ...
- jquery——彩色投票进度条
一.需求 如下图 重点是要实现进度条. 二.分析 html5新增及删除标签一文中提到过html5新增了progress标签.但是肯定有兼容性问题.生成环境不适用,所以要模拟实现. 原理:动态设置< ...
- HTML5 CSS3 诱人的实例 : 网页载入进度条的实现,下载进度条等
今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
- JQuery实战——页面进度条效果
今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...
随机推荐
- [学习] nofollow
[来源:百度百科 http://baike.baidu.com/view/1584081.htm] 简介 nofollow[1]是一个HTML标签的属性值.它的出现为网站管理员提供了一种方式,即告诉搜 ...
- INSERT 语句总结
一.基本语句 1.向指定的列中插入值(在插入批量数据时方式2优于方式1) <!--插入一条值--> INSERT INTO t1(field1,field2) VALUE(v001,v00 ...
- .net core系列之《新一代的配置系统Configuration在支持多数据源,热更新,层级化方面代码快速实践》
在我们之前.Net Framework的项目中,配置文件是WebConfig或AppcConfig文件,而当我们想要添加我们自定义的节点时,还需要在这个文件中的section中定义我们自定义的节点,这 ...
- 【Oracle】查看被锁的表和解锁
--以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...
- SQL点点滴滴_SQL分页查询
假如tb_customer表中的数据量非常大,在显示时要分页显示而且每页只显示10条信息.为了效果我们取第三页的数据. 方法一:遍历两次表,取不同的数据. select top 10 * from t ...
- 使用事务和SqlBulkCopy批量插入数据
SqlBulkCopy是.NET Framework 2.0新增的类,位于命名空间System.Data.SqlClient下,主要提供把其他数据源的数据有效批量的加载到SQL Server表中的功能 ...
- iOS中 Proxy和的delegate区别
在ios中使用proxy代理模式,经常容易和delegate委托模式混淆. 委托模式(delegate),是简单的强大的模式,可让一个对象扮演另外对象的行为.委托对象保持到另外对象的引用,并在适当的时 ...
- cpu和gpu关于图像的分工
cpu: 图像IO导入: 图像生成: 部分图片解码: gpu: 几何图像表示: 几何图像组合等处理: 部分格式图像解码: 图像的光学.几何学操控:
- Client/Server 模型 与socket
Client/Server 模型 Sockets 是以 Client 和 Server 交互通信方式来使用的.典型的系统配置是把 Server 放在一台机器中,而把 Client 放在另一台机器中, ...
- 【[SDOI2011]拦截导弹】
这道题是真的蛇皮 方案数要开\(double\)真的蛇皮 首先\(dp\)是非常容易看出来的 设\(dp[i]\)表示以\(i\)结尾的最长子序列 显然转移方程为 \[dp[i]=max(dp[j]+ ...