ajax xhr progress,javascript - JQuery ajax progress via xhr - Stack Overflow

FOR PHP

if (evt.lengthComputable) { is not working in XHR, I did this and now it is working.

PHP:

$startTime = time();

//your code or

sleep(10);

$endTime = time() - $startTime;

header('Content-Length: '.strlen($endTime));

$response['success'] = true;

echo json_encode($response);

Here is my HTML:

Ajax:

var percentComplete = 1;

$.ajax({

method: 'post',

url: 'test.php',

data:{'actionPerform':'actionPerform'},

xhr: function(){

var xhr = new window.XMLHttpRequest();

//Upload progress, request sending to server

xhr.upload.addEventListener("progress", function(evt){

console.log("in Upload progress");

console.log("Upload Done");

}, false);

//Download progress, waiting for response from server

xhr.addEventListener("progress", function(e){

console.log("in Download progress");

if (e.lengthComputable) {

//percentComplete = (e.loaded / e.total) * 100;

percentComplete = parseInt( (e.loaded / e.total * 100), 10);

console.log(percentComplete);

$('#bulk-action-progbar').data("aria-valuenow",percentComplete);

$('#bulk-action-progbar').css("width",percentComplete+'%');

}

else{

console.log("Length not computable.");

}

}, false);

return xhr;

},

success: function (res) {

//...

}

});