jq 上传下载进度条
里面只演示了下载的，挂载的是我的七牛服务器上的内容，上传事件和下载是一模一样的，为了大家不乱上传东西到我的服务器，而且我的服务器容量也不大，这里只展示了下载。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
F12查看
<span class="zz"></span>
<div id="bx" style="height:22px;width:0;background-color:green;"></div>
</body>
<script src="http://p8sv0x8g6.bkt.clouddn.com/jquery-2.1.1.min.js"></script>
<script>
function download_progress_handler (e) {
if (e.lengthComputable) {
var percentComplete = e.loaded / e.total;
console.log(percentComplete);
$("#bx").css({"width":percentComplete*100+"%"})
$(".zz").html(percentComplete);
} else {
console.log('no')
}
}
$.ajax({
type:"post",
url:"http://p8sv0x8g6.bkt.clouddn.com/js.css%E5%8E%8B%E7%BC%A9.zip",
data:{},
xhr: function() {
// 获取JQuery内部使用的XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
// 下载进度监控
xhr.addEventListener('progress', download_progress_handler, false); // 上传进度监控(事件和下载是一模一样的，为了大家不乱上传东西到我的服务器，这里只展示了下载。)
//xhr.upload.addEventListener('progress', upload_progress_handler, false);
return xhr;//一定要返回，不然jQ没有XHR对象用了
},
success:function (data) {
console.log("成功");
$(".zz").html("下载成功")
},
error:function (data) {
console.log("失败");
console.log(data)
}
}); </script>
</html>
展示图：
jq 上传下载进度条的更多相关文章
- FTP 上传下载 进度条
11 /// <summary> /// 文件上传 /// </summary> /// <param name="filePath">原路径( ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- asp.net大文件上传与上传文件进度条问题
利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...
- node实现http上传文件进度条 -我们到底能走多远系列（37）
我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...
- 使用Typescript重构axios(二十五)——文件上传下载进度监控
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- RxHttp 完美适配Android 10/11 上传/下载/进度监听
1.前言 随着Android 11的正式发布,适配Android 10/11 分区存储就更加的迫切了,因为Android 11开始,将强制开启分区存储,我们就无法再以绝对路径的方式去读写非沙盒目录下的 ...
随机推荐
- python获取代理IP并测试是否可用
# coding: utf-8 import urllib2 import re import time def getDL(page): url = 'http://www.xicidaili.co ...
- 基于geohash6编码实现相邻4、9、16网格合并
前面的两篇文章介绍了geohash的基本原理及c#代码相关实现,其中geohash 5位编码单个网格覆盖面积大约在24平方千米,6位编码单网格覆盖面大约在0.73平方千米, 相邻编码长度之间单网格覆盖 ...
- PerformEraseBackground 擦除背景（ThemeServices）
PerformEraseBackground 擦除背景的简单方法(外带ThemeServices例子) 在查这个函数的时候,顺便看到了有趣的代码. 怎么使用 Themes . unit Unit2; ...
- ubuntu-docker入门到放弃（五）docker网络管理
查看docker宿主机的网卡信息我们会发现,有一个docker0的网卡,这个网卡就是用于跟docker容器进行通讯的,这个网段跟我们docker容器的网段是一样的: #ifconfig docker容 ...
- TensorFlow：tf.nn.max_pool实现池化操作
tf.nn.max_pool(value, ksize, strides, padding, name=None) 参数是四个,和卷积很类似: 第一个参数value:需要池化的输入,一般池化层接在卷积 ...
- javascript 判断是否移动客户端 userAgent isMobile
var isMobile = { Android: function () { return (/android/i.test(navigator.userAgent.toLowerCase())); ...
- Eclipse/MyEclipse向HDFS中如创建文件夹等操作报错permission denied解决办法
不多说,直接上干货! 问题现象 当执行创建文件的的时候, 即: String Path = "hdfs://host2:9000"; FileSystem fileSystem = ...
- 使用Selenium模拟浏览器抓取斗鱼直播间信息
获取斗鱼直播间每个房间的名称.观看人数.tag.主播名字 代码: import time from multiprocessing import Pool from selenium import w ...
- 固态硬盘使用简要手册——windows平台
第一步,请安装它. 第二步,请关闭磁盘整理功能,如图 详细:控制面板--管理工具--任务计划程序 打开界面,设置如下 图1 第三步:预读(Superfetch)和快速搜索(Windows Search ...
- PAT 乙级 1063 计算谱半径(20) C++版
1063. 计算谱半径(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 在数学中,矩阵的“谱半径”是指其特 ...