2

I understand the xhr.upload.onprogress event (file upload). Like this : 

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

But what about the xhr.onprogress event, which is file download from the server ?

I can't find a simple example of this.

Patrick

trogne
  • 3,402
  • 3
  • 33
  • 50
  • http://stackoverflow.com/questions/18836482/xhr-download-and-upload-progress and https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress – Justin K Sep 27 '13 at 04:40
  • Where is an example of xhr.progress event ? (not xhr.upload.progress) – trogne Sep 27 '13 at 12:03
  • try this hhttp://stackoverflow.com/a/42235655/2282880 – Meloman Feb 14 '17 at 20:34

1 Answers1

0

As Document said:

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.

You can try to use following code to validate 

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();
AdaroMu
  • 166
  • 2
  • 8