ajax progress jquery code example
Example 1: ajax with progress bar
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
}, false);
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
}
});
Example 2: progress ajax request
$.ajax({
url: path,
type: 'post',
data: {payload: payload},
xhr: function () {
var xhr = $.ajaxSettings.xhr();
xhr.onprogress = function e() {
if (e.lengthComputable) {
console.log(e.loaded / e.total);
}
};
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
console.log(e.loaded / e.total);
}
};
return xhr;
}
}).done(function (e) {
}).fail(function (e) {
});