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