Ajax实现下载进度条的示例代码

2020-11-27 来源：易榕旅网

本篇文章给大家带来的内容是关于Ajax实现下载进度条的示例代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

可以通过设置一个XMLHttpRequest对象的 responseType 属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document", 和 "text".

response 属性的值会根据 responseType 属性的值的不同而不同, 可能会是一个 ArrayBuffer, Blob, Document, string,或者为NULL(如果请求未完成或失败)。

新版本的 XMLHttpRequest 对象，传送数据的时候，有一个 progress 事件，用来返回进度信息。

它分成上传和下载两种情况。下载的 progress 事件属于 XMLHttpRequest 对象，上传的 progres s事件属于 XMLHttpRequest.upload 对象。

1、前端代码：

downLoadProcess(url,filename){
 filename = filename || 'xxx.csv';
 // 创建xhr对象
 var req = new XMLHttpRequest(); 
 //向服务器发送请求 open() send()
 req.open("POST", url, true); //(method-GET/POST ,url, async) 
 req.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST时需要传递 
 //监听进度事件 
 xhr.addEventListener("progress", uploadProgress, false);
 xhr.addEventListener("load", uploadComplete, false);
 xhr.addEventListener("error", uploadFailed, false);
 xhr.addEventListener("abort", uploadCanceled, false);
 
 /*
 XMLHttpRequest 的 responseType 属性
 一个枚举类型的属性，返回响应数据的类型,只能设置异步的请求
 1、'' -- DOMString (默认); UTF-16
 2、arraybuffer -- arraybuffer对象，即类型化数组
 3、blob -- Blob对象， 二进制大数据对象
 4、document -- Document对象
 5、json
 6、text 
 */
 //设置返回数据的类型
 req.responseType = "blob";
 
 req.onreadystatechange = function () { //同步的请求无需onreadystatechange 
 if (req.readyState === 4 && req.status === 200) { 
 var filename = $(that).data('filename'); 
 if (typeof window.chrome !== 'undefined') { 
 // Chrome version
 var link = document.createElement('a');
 link.href = window.URL.createObjectURL(req.response);
 link.download = filename;
 link.click();
 } else if (typeof window.navigator.msSaveBlob !== 'undefined') { 
 // IE version
 var blob = new Blob([req.response], { type: 'application/force-download' });
 window.navigator.msSaveBlob(blob, filename);
 } else {
 // Firefox version
 var file = new File([req.response], filename, { type: 'application/force-download' });
 window.open(URL.createObjectURL(file));
 }
 }
 };
 
 req.send("fname=Henry&lname=Ford");
 } 
 function uploadProgress(evt) {
 if (evt.lengthComputable) {　　　　　　　　　　/*后端的主要时间消耗都在查询数据和生成文件，所以可以设置默认值，直到真正到达下载的进度，再开始走进度条*/
 var percent = Math.round(evt.loaded * 100 / evt.total);
 
 document.getElementById('progress').innerHTML = percent.toFixed(2) + '%';
 document.getElementById('progress').style.width = percent.toFixed(2) + '%';
 }else {
 document.getElementById('progress').innerHTML = 'unable to compute';
 }
 }
 function uploadComplete(evt) {
 /* 服务器端返回响应时候触发event事件*/
 document.getElementById('result').innerHTML = evt.target.responseText;
 }
 function uploadFailed(evt) {
 alert("There was an error attempting to upload the file.");
 }
 function uploadCanceled(evt) {
 alert("The upload has been canceled by the user or the browser dropped the connection.");
 }

2、后台处理接口

public void aaa()
 { 
 string result = string.Empty;
 for (int i = 1; i <= 6000; i++)
 {
 result += i.ToString();
 int len = result.Length;
 Response.Headers.Add("Content-Length", len.ToString());
 Response.Headers.Add("Content-Encoding", "UTF-8");
 Response.Write(result);
 }
 }

注意到：：

Response.Headers.Add("Content-Length", len.ToString());
Response.Headers.Add("Content-Encoding", "UTF-8");

写出 http 头时候，附加 “Content-Length”和Content-Encoding，

这样 JS 端的 progress 事件的 event.lengthComputable 值才会为 true， event.total 才会在数据传输完毕之前取得值，

否则 event.lengthComputable 值会返回 false， event.total 在数据完成之前值都是0。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！

显示全文

全部栏目

Ajax实现下载进度条的示例代码