JQuery ajax progress via xhr
ProgressEvent.lengthComputable
The ProgressEvent.lengthComputable read-only property is a Boolean flag indicating if the resource concerned by the ProgressEvent has a length that can be calculated. If not, the ProgressEvent.total property has no significant value.
So in your case if you debug a little , you will find evt.lengthComputable = false;
so you can not trace the progress;
xhr.addEventListener("progress", function (evt) {
console.log(evt.lengthComputable); // false
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
progressElem.html(Math.round(percentComplete * 100) + "%");
}
}, false);
DEMO
FYI
If lengthComputable
is false within the XMLHttpRequestProgressEvent
, that means the server never sent a Content-Length header
in the response.