里面只演示了下载的，挂载的是我的七牛服务器上的内容，上传事件和下载是一模一样的，为了大家不乱上传东西到我的服务器，而且我的服务器容量也不大，这里只展示了下载。
代码：
<!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 上传下载进度条的更多相关文章

  1. FTP 上传下载 进度条

    11 /// <summary> /// 文件上传 /// </summary> /// <param name="filePath">原路径( ...

  2. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  3. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  4. node实现http上传文件进度条 -我们到底能走多远系列（37）

    我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...

  5. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  6. Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...

  7. 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 ...

  8. 使用Typescript重构axios(二十五)——文件上传下载进度监控

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  9. RxHttp 完美适配Android 10/11 上传/下载/进度监听

    1.前言 随着Android 11的正式发布,适配Android 10/11 分区存储就更加的迫切了,因为Android 11开始,将强制开启分区存储,我们就无法再以绝对路径的方式去读写非沙盒目录下的 ...

随机推荐

  1. java降低竞争锁的一些方法

    序本文介绍一下提升并发可伸缩性的一些方式:减少锁的持有时间,降低锁的粒度,锁分段.避免热点域以及采用非独占的锁或非阻塞锁来代替独占锁. 减少锁的持有时间降低发生竞争可能性的一种有效方式就是尽可能缩短锁 ...

  2. [转] LINUX内核代码编程规范

    这是一个简短的文档,描述了linux内核的首选代码风格.代码风格是因人而异的,而且我 不愿意把我的观点强加给任何人,不过这里所讲述的是我必须要维护的代码所遵守的风格, 并且我也希望绝大多数其他代码也能 ...

  3. The Best KPIs to Use in Your Company

    Here is a list of key performance indicators (KPIs) that should be used in contact centres, alongsid ...

  4. 打开RAD Studio XE5提示"displayNotification:内存不够"解决办法

    操作方法: 在RAD Studio XE5快捷方式上鼠标右击选择属性,在弹出的快捷方式标签页中将目标(T):"C:\Program Files (x86)\Embarcadero\RAD S ...

  5. windows 日志，IIS应用程序池回收日志

    应用程序池回收日志筛选事件ID:5074 进程被关闭:5186

  6. win7环境下安装composer

    以前python有pip,但是PHP一直没有好的包管理工具,不过现在php也有比较好的包管理工具了,那就是composer 1:下载地址:https://getcomposer.org/downloa ...

  7. 【占位符替换】替换String中的占位符标志位{placeholder}

    概述 占位符替换, 占位符表示为:{placeholder}; 示例:替换如下{xxx}占位符中的内容 "名字:{name},年龄:{age},学校:{school}" 提供了两种 ...

  8. pyqt4 利用信号槽在子线程里面操作Qt界面

    转载:ABigCaiBird #-*- coding:utf-8 -*- ####### from PyQt4.QtCore import * from PyQt4.QtGui import * im ...

  9. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  10. appium+python自动化42-微信公众号 (可能以后会遇到也遇到切换不了webview的问题 记录再此 还没试)

    前言 本篇介绍如何在微信公众号上自动化测试,以操作我的个人公众号:yoyoketang为例,没关注的,先微信关注了,再跟着操作 环境准备:python 3.6appium 1.7以上版本微信6.6.6 ...