本博文源自技术群的讨论，因为网上找不到实现这样效果的的代码，而我说没问题，可以实现，因此有人质疑我是否能做到，呵呵，现将我实现代码贴出如下，希望有兴趣的同学可以继续完善：

本代码仅做技术展现，请勿探讨其他细节。。。。

<!DOCTYPE html>

<html>

<head>

    <title>Test XMLHttpRequest download with progress bar</title>

    <script type="text/javascript" src="/js/jquery-2.2.0.js"></script>

</head>

<body>

    <div style="width:600px;margin:10px auto;background-color:#fff;">

        <input id="DownLoadFile" type="button" value="DownLoadFile" />

        <div style="height:8px;width:100px;border-radius:3px;border:1px solid #eee;">

            <div id="progressBar" style="background-color:#ccf;height:6px;width:0px;border-radius:3px;border:0px;"></div>

        </div>

    </div>

  </body>

</html>

<script type="text/javascript">

    var onProgress = function (e) {

        if (e.lengthComputable) {

            document.getElementById("progressBar").style.width = Math.round(e.loaded * 100 / e.total) + 'px';

        }

    };

    $(function () {

        $('#DownLoadFile').on('click', function () {

            var xhr = new XMLHttpRequest();

            xhr.onprogress = onProgress; //下载监听

            xhr.responseType = "blob";

            xhr.open("GET", "http://localhost:36348/Doc/TortoiseSVN-1.9.4.27285-x64.zip", true);

            xhr.onreadystatechange = function (e) {

                if (this.readyState == 4 && this.status == 200) {

                    var response = this.response;

                    var URL = window.URL || window.webkitURL || window;

                    var link = document.createElement('a');

                    link.href = URL.createObjectURL(response);

                    link.download = 'TestDownLoad';

                    //link.click(); //ie及firefox不响应识别模拟点击事件

                    //下面方法,edge,chrome和firefox都兼容

                    var event = document.createEvent('MouseEvents');

                    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

                    link.dispatchEvent(event);

                }

            }

            xhr.send(null);

            return false;

        });

    });

</script>

　　

　　运行截图：

接收文件展开截图

注意：大家再现效果的时候，选择下载的文件不能太小，否则进度条不会显示！！

通过XmlHttpRequest实现带进度条异步下载文件的更多相关文章

  1. PHP+ajaxForm异步带进度条上传文件实例

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: v ...

  2. 赞！带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...

  3. 带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...

  4. ajax利用html5新特性带进度条上传文件

    http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...

  5. Android带进度条的文件上传，使用AsyncTask异步任务

    最近项目中要做一个带进度条的上传文件的功能,学习了AsyncTask,使用起来比较方便,将几个方法实现就行,另外做了一个很简单的demo,希望能对大家有帮助,在程序中设好文件路径和服务器IP即可. A ...

  6. HTML5 jQuery+FormData 异步上传文件，带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  7. 赵雅智_android多线程下载带进度条

    progressBar说明 在某些操作的进度中的可视指示器,为用户呈现操作的进度,还它有一个次要的进度条,用来显示中间进度,如在流媒体播放的缓冲区的进度. 一个进度条也可不确定其进度.在不确定模式下, ...

  8. 【Web】前端文件上传，带进度条

    最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...

  9. servlet多文件上传（带进度条）

    需要commons-fileupload-1.3.jar和commons-io-2.4.jar的支持 页面效果:(图片文件都可以) (1)进度标识类 public class UploadStatus ...

随机推荐

  1. LibreOffice 打开中文乱码

    From: http://hi.baidu.com/designhouse/item/746130c01f98a42dee4665de 1:文件->打开 2:文件类型:已编码文本

  2. cocos2d-x:懒人数学函数

    做游戏开发,要用到比较多的数学计算,对于程序员来说,还是用一种懒一点的方法,cocos2d-x方便开发者投机取巧...提供了很多方便的的数学函数,方便我们的数学计算.以下是在网上收集到的一些常用的数学 ...

  3. 大冰--寻人启事--one

    看得懂的,都不是命运,说得清的,都不叫爱情. 忘得了的,都不是遗憾,听得见的,都不是伤心. 躲的开的,都不是缘分,猜得透的,都不叫人生.

  4. JAVA新手笔记 Intent对象和Bundle对象

    Intent对象和Bundle对象 功能主要是在 MainActivity中定义了2个EditText,当用户输入内容,把他传入到第二个活动, 自己新创的活动中,MyActivity中 放在MainA ...

  5. JS-获取URL请求参数

    前言:原来做过一个项目,需要实现一个页面打印的功能,由于项目中使用了AngularJS+Bootstrap等前端框架,需要打印的页面又在弹出框中,使用了Bootstrap的模态框后发现打印的效果不太好 ...

  6. Entity Framework学习笔记——错误汇总

    之前的小项目做完了,到了总结经验和更新学习笔记的时间了.开始正题之前先啰嗦一下,对之前的学习目标进行一个调整:“根据代码生成表”与“生成数据库脚本和变更脚本”合并为“Code First模式日常使用篇 ...

  7. 这些年正Android - 身在他乡

    “从不敢想到想去做到,做到我想的,事实证明我并不像他们想象的那样脆弱.我只是需要一盏灯,一架钢琴,一支麦克风.曾经想象过做一名医生救死扶伤,也曾想过做律师,做记者,做奥运冠军,但是都没有结果.因为我最 ...

  8. my sql中join的操作

    SQL标准中的Join的类型:  首先,设置表employees和department的数据为:  1.inner join … on操作类型 内连接inner join是基于连接谓词将两张表(如A和 ...

  9. 【转】如何在Mac系统中安装R的rattle包

    [转自知乎]:https://www.zhihu.com/question/28944497 1. 安装 xquartz (http://xquartz.macosforge.org)2. 安装 GT ...

  10. rabbitMQ+php

    RabbitMQ与PHP(一) 项目中使用RabbitMQ作为队列处理用户消息通知,消息由前端PHP代码产生,处理消息使用Python,这就导致代码一致性问题,调整消息定义时需要PHP和Python都 ...