本博文源自技术群的讨论,因为网上找不到实现这样效果的的代码,而我说没问题,可以实现,因此有人质疑我是否能做到,呵呵,现将我实现代码贴出如下,希望有兴趣的同学可以继续完善:
本代码仅做技术展现,请勿探讨其他细节。。。。
<!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实现带进度条异步下载文件的更多相关文章
-
PHP+ajaxForm异步带进度条上传文件实例
在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: v ...
-
赞!带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
-
带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...
-
ajax利用html5新特性带进度条上传文件
http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...
-
Android带进度条的文件上传,使用AsyncTask异步任务
最近项目中要做一个带进度条的上传文件的功能,学习了AsyncTask,使用起来比较方便,将几个方法实现就行,另外做了一个很简单的demo,希望能对大家有帮助,在程序中设好文件路径和服务器IP即可. A ...
-
HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
-
赵雅智_android多线程下载带进度条
progressBar说明 在某些操作的进度中的可视指示器,为用户呈现操作的进度,还它有一个次要的进度条,用来显示中间进度,如在流媒体播放的缓冲区的进度. 一个进度条也可不确定其进度.在不确定模式下, ...
-
【Web】前端文件上传,带进度条
最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...
-
servlet多文件上传(带进度条)
需要commons-fileupload-1.3.jar和commons-io-2.4.jar的支持 页面效果:(图片文件都可以) (1)进度标识类 public class UploadStatus ...
随机推荐
-
css中import与link用法区别
方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址 ...
-
NSString 的 compare 方法
- (NSComparisonResult)compare:(NSString *)string options:(NSStringCompareOptions)mask range:(NSRange ...
-
Applied Deep Learning Resources
Applied Deep Learning Resources A collection of research articles, blog posts, slides and code snipp ...
-
POJ 3678
Katu Puzzle Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7391 Accepted: 2717 Descr ...
-
APNS 那些事!
之前在消息推送中间件APush里实现了对APNS的桥接.并利用业余时间阅读了官方指南Local and Push Notification Programming Guide.蛮有心得的.稍作总结.分 ...
-
测试kestrel的队列
一.依赖环境的安装 1.sbt wget http://typesafe.artifactoryonline.com/typesafe/ivy-releases/org.scala-tools.s ...
-
JavaWeb框架SSH_Struts2_(三)
1. Struts2的拦截器(使用拦截器实现权限控制) 拦截器简介 拦截器概述 拦截器工作原理 拦截器的配置 Struts2的内建拦截器 内建拦截器的介绍 内建拦截器的配置 自定义拦截器 实现自定义拦 ...
-
Python 基础【二】 上
一.python语言分类 1. C python c语言的python版本 官方推荐 使用C语言实现,使用最为广泛,CPython实现会将源文件(py文件)转换成字节码文件(pyc文件),然后运行 ...
-
ES6-map、filter、find、findIndex讲解
map方法:可以简单的理解为映射 var arr=[1,2,3,4]; console.log( arr.map((n)=>n*n) );//[1, 4, 9, 16] console.log( ...
-
A1104. Sum of Number Segments
Given a sequence of positive numbers, a segment is defined to be a consecutive subsequence. For exam ...