首 页
关于方维
网站案例
网站建设
小程序开发
解决方案
建站资讯
联系方维
400-800-9385
用a标签下载跨域文件并显示下载进度
发表日期:2023-10-20 09:40:58 作者来源:黎云辉 浏览:2697 标签:
网站制作
当前位置:
首页
-
建站资讯
-
网站建设
使用 XmlHttpRequest 实现带进度条的异步文件下载是一个常见的需求。在本文中,我们将介绍如何利用 XmlHttpRequest 对象以及一些 JavaScript 技术来实现这一功能。我们将使用 HTML5 的进度条元素来展示下载进度
。
在开始之前,我们先了解一下 XmlHttpRequest 对象。它是一种在后台与服务器进行交互的技术,可以用来发送 HTTP 请求,并异步获取服务器的响应。在本例中,我们将使用 XmlHttpRequest 对象发送一个 GET 请求来下载文件,并通过监听其进度事件来更新进度条。
首先,在 HTML 中,我们需要创建一个进度条元素,用来显示下载进度。
```html
<a onclick="downloadFile(this)" data-url="
文件链接
" data-name="
自定义文件名
" class="download">
<img src="__IMG__/download.png" />
</a>
<div class="progressBar_f">
<div id="progressBar"></div>
</div>
```
接下来,我们创建一个 JavaScript 函数,用来处理文件的下载以及更新进度条。代码如下:
```javascript
<script type="text/javascript">
function downloadFile(obj) {
var file_url = $(obj).attr('data-url');
var file_name = $(obj).attr('data-name');
$(obj).next('.progressBar_f').show();
var xhr = new XMLHttpRequest();
// xhr.onprogress = onProgress; //下载监听
//监听进度事件
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
// var percentComplete = evt.loaded / evt.total;
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
console.log(percentComplete);
$(obj).next('.progressBar_f').children("#progressBar").css("width", percentComplete + '%');
if(percentComplete=='100'){
$(obj).next('.progressBar_f').hide();
}
}
}, false);
xhr.responseType = "blob";
xhr.open("GET", file_url, 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 = file_name;
//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>
```
在上述代码中,downloadFile函数接收一个参数
obj
,表示要下载的跨域资源的
内容,其中file_url为跨域资源的URL,file_name为自定义的下载资源名称
。首先创建一个XMLHttpRequest对象,设置其请求方式为GET,并将响应类型设置为blob。接下来,监听xhr对象的readyState 事件,在获取到响应后判断状态码是否为
4
,如果是,则创建一个a标签,设置其href属性为通过URL.createObjectURL()方法创建的临时链接,并设置download属性为要下载的文件名。最后,模拟用户点击该a标签,实现跨域资源的间接下载。需要注意的是,
这个
方法需要
远程
服务器端设置CORS(跨域资源共享)允许跨域访问
,如果没有设置远程资料跨域共享是无法下载文件的
。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6887.html
上一篇:
网站建设需要流程有那些呢?
下一篇:
浅谈企业网站建设对公司的重要性
相关网站设计案例
影一文化
艺品高玻璃
益学影视
相关资讯
探秘查询网站制作:从零基础到高并发,打造...
日期:2025-01-26 浏览:81
探秘外贸网站制胜之道:领军企业如何打造...
日期:2025-01-20 浏览:123
深圳高端网站制作公司:如何找到顶尖高...
日期:2025-01-20 浏览:117
常见问题
企业网站建设常见问题整理合集【置顶】
在深圳建设一个公司网站多少钱
开发网站需要多久跟这九个因素有关
最新文章
网页组成结构与加载顺序
浏览量:1068
【签约】上市公司华熙生物品牌网...
浏览量:1520
【签约】零重力飞机工业中文响应式...
浏览量:1557
【签约】广东锂华新能源科技品牌网...
浏览量:1340
用vue.js+element做表单验证提交...
浏览量:802
欺骗性设计模式的危险(以及如何避免)
浏览量:1210
400-800-9385
97798819
回到顶部
0
请您留言
非常抱歉,客服不在线,麻烦留下您的联系电话或者微信,我们看到后会马上联系您!
提交
感谢留言
我们会尽快与您联系
关闭