Exemple de code Ajax pour implémenter la barre de progression du téléchargement

Le contenu de cet article concerne l'exemple de code d'implémentation Ajax de la barre de progression de téléchargement. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Vous pouvez modifier le type de données d'une réponse renvoyée par le serveur en définissant l'attribut réponseType d'un objet XMLHttpRequest. Les valeurs d'attribut disponibles sont la chaîne vide (par défaut), "arraybuffer", "blob", "document" et "text".

La valeur de l'attribut de réponse variera en fonction de la valeur du Attribut ResponseType. Peut être un ArrayBuffer, un Blob, un Document, une chaîne ou NULL si la demande est incomplète ou a échoué.

La nouvelle version de l'objet XMLHttpRequest dispose d'un événement progress pour renvoyer des informations de progression lors de la transmission des données.

Il est divisé en deux situations : le téléchargement et le téléchargement. L'événement de progression du téléchargement appartient à l'objet XMLHttpRequest et l'événement de progression du téléchargement appartient à l'objet XMLHttpRequest.upload.

1. Code frontal :

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. Interface de traitement backend

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);
            }
        }

Remarque : :

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

Lors de l'écriture de l'en-tête http, ajoutez "Content-Length" et Content-Encoding,

De cette façon, la valeur event.lengthComputable de l'événement progress côté JS sera vrai, et event.total La valeur sera obtenue avant la fin de la transmission des données,

sinon la valeur event.lengthComputable retournera false et la valeur event.total sera 0 avant que les données ne soient terminées .

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez prêter attention à la colonne Vidéo du didacticiel JavaScript du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!