本博文源自技术群的讨论，因为网上找不到实现这样效果的的代码，而我说没问题，可以实现，因此有人质疑我是否能做到，呵呵，现将我实现代码贴出如下，希望有兴趣的同学可以继续完善：
本代码仅做技术展现，请勿探讨其他细节。。。。
<!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="600px;margin:10px auto;background-color:#fff;">
<input id="DownLoadFile" type="button" value="DownLoadFile" />
<div style="height:8px;100px;border-radius:3px;border:1px solid #eee;">
<div id="progressBar" style="background-color:#ccf;height:6px;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>
运行截图：
接收文件展开截图
注意：大家再现效果的时候，选择下载的文件不能太小，否则进度条不会显示！！