zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    我的浏览器收藏夹分类
    我的浏览器收藏夹分类
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
  • 原文地址:https://www.cnblogs.com/slightFly/p/10553977.html
Copyright © 2011-2022 走看看