javascript - ajax文件下载 : progress event, 进行下载

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

如Document说:

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object.

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

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