小编给大家分享一下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。
以上是Ajax实现下载进度条的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。