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方法实现.下面 ...
随机推荐
- Anjular中的路由配置以及服务等模块的一些基本操作
1.路由的配置: 在Angular.js中,我们可以根据自己的需求来配置路由,以达到当url中的地址改变时,会跳转不同的页面 <script> //一开始的url:"http:/ ...
- Android实现身份证拍摄框
http://blog.csdn.net/lhbtm/article/details/55505668 最近项目需要实现身份证拍照的功能,系统的相机并不能满足需求,故需要自定义相机,先上效果图,使用了 ...
- Java和C# RSA加解密相互通信和使用公钥加密传输
关于JAVA和C#加解密通讯的话,可以用这个BouncyCastle插件,会帮助你解决很多问题 http://www.bouncycastle.org/ //c#使用java给的公钥进行rsa加密 p ...
- jquery使页面滚动到底部
function scrollToEnd(){//滚动到底部 var h = $(document).height()-$(window).height(); $(document).scrollTo ...
- Python学习---Django误删除sql表后,如何创建数据
误删除sql表后,怎么创建数据? 仅仅适合单表,多表因为涉及约束, python mangage.py makemigrations --> 生成migrations目录和根数据库对应的sql ...
- WORD列表缩进的文本起始点
Figure 1 Figure 2 Figure 3 编号位置以刻度尺为起点0.74厘米(2个字符间距),文本缩进以刻度尺为起点2.96厘米(8个字符间距) 以上两者相减得到的值正好=特殊格式悬挂缩进 ...
- 只用最适合的! 全面对比主流 .NET 报表控件:水晶报表、FastReport、ActiveReports 和 Stimulsoft
前言 随着 .NET 平台的出现,报表相关的开发控件随之出现,目前已经有若干成熟的产品可供开发人员使用,本文旨在通过从不同维度对比目前最流行的4款 .NET报表控件,给所有报表开发人员在做产品选型时一 ...
- codeforces 1000F One Occurrence(线段树、想法)
codeforces 1000F One Occurrence 题意 多次询问lr之间只出现过一次的数是多少. 题解 将查询按照左端点排序,对于所有值维护它在当前位置后面第二次出现是什么时候,那么查询 ...
- C++计算器项目的初始部分
作业代码 https://github.com/How-Come/object-oriented/tree/master/Calculator 一.解题思路 1.Scan类 这次题目的难点在于如何将输 ...
- Java Basic Notes——static修饰符
1.static 在程序中任何变量或者代码都是在编译时由系统自动分配内存来存储的,而所谓静态就是指在编译后所分配的内存会一直存在,直到程序退出内存才会释放这个空间,也就是只要程序在运行,那么这块内存就 ...