javascript - ajax 文件下载：进度事件，用于下载

Question

我了解 xhr.upload.onprogress 事件（文件上传）。像这样 ：

    xhr.upload.onprogress = function(e) {   // if (e.lengthComputable) ...
        var percentUploaded = Math.floor(100 * e.loaded / e.total);
        progressBarElem.value = percentUploaded;
        messageAreaElem.innerHTML = percentUploaded + "% uploaded";
    }

但是从服务器下载文件的 xhr.onprogress 事件呢？

我找不到一个简单的例子。

帕特里克

Answer 1

正如文件所说：

下载和上传传输都存在进度事件。下载事件在 XMLHttpRequest 对象本身上触发，如上面的示例所示。上传事件在 XMLHttpRequest.upload 对象上触发。

您可以尝试使用以下代码进行验证

var progress = 0.1;

var oReq = new XMLHttpRequest();

//Download progress
oReq.addEventListener("progress", function(evt){
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    //Do something with download progress
    console.log(evt.total);
    if(percentComplete > progress ){
        console.log("Finish " + progress * 100 + "%.");
        progress += 0.1;

    }
  }
}, false);

oReq.open("get", "url", true);
oReq.send();