js 文件下载进度监控

最新推荐文章于 2024-04-03 11:30:17 发布

aibai3018

最新推荐文章于 2024-04-03 11:30:17 发布

阅读量1.9k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/oneall/p/11557482.html

版权

本文介绍了一种使用XMLHttpRequest对象实现的MP4文件下载方法。通过设置响应类型为blob，可以实现在JavaScript中直接处理文件下载的过程，并提供进度反馈。文章详细展示了如何创建XMLHttpRequest对象、设置请求方式及头信息、监听下载进度与完成事件，以及最终触发文件下载。

摘要由CSDN通过智能技术生成

 1     var xhr = new XMLHttpRequest();
 2     xhr.open('GET', '文件地址.mp4');
 3     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 4     xhr.responseType = "blob";
 5     xhr.onprogress = function (event) {
 6         if (event.lengthComputable) {
 7             console.log(event.loaded);
 8             console.log(event.total);12         }
13     };
14     xhr.onload = function (oEvent) {
15         console.log(oEvent);
16         console.log(xhr.status);
17         console.log(xhr.response);
18         if (xhr.readyState === 4 && xhr.status === 200) {
19             // var name = xhr.getResponseHeader("Content-disposition");
20             // var filename = name.substring(20,name.length);
21             var blob = new Blob([xhr.response], {type: 'video/mp4'});
22             var csvUrl = URL.createObjectURL(blob);
23             var link = document.createElement('a');
24             link.href = csvUrl;
25             link.download = 'abababababba.mp4';
26             link.click();          
27         }
28     }
29     xhr.send();