Show progress on Jquery ajax call for sending multiple email - php

Question

I'm using ajax to send a single email to all my clients (example before christmas).
Here's the ajax script
$(function () {
$("#mktg_submit").on("click",function( event ) {
event.preventDefault();
console.log($("#mktg").serialize());
$("#mktg_esito").empty();
$("#mktg_esito").append("<img src='images/loading.gif' alt=loading title=loading />");
$.ajax({
type : 'POST',
url : 'json/mktg.php',
data : $("#mktg").serialize(),
dataType : 'json',
encode : true
})
.done(function(data) {
$( "#mktg_esito" ).empty();
console.log(data);
if ((data)["success"]===false) {
$( "#mktg_esito" ).append("<div class='alert alert-danger'>"+(data)["errors"]+"</div>");
} else {
$("#mktg_esito").append("<div class='alert alert-success' id='mktg_mess'><strong>Ben fatto!</strong> Email inviate correttamente.</div>");
$.each((data)["email"], function( i, val ) {
$( "#mktg_esito" ).append("<p>Email inviata a: <b>"+val+"</b></p>");
});
}
$("#mktg_mess").show().delay(1000).fadeOut();
});
});
});
Whith this I only see the loading image when the script was launched and I see the result only when all finish. When I send 1.000 email I can't see the progress of the work, can anyone help me to use the best way to see the progress of the sending?

Answer 1

Use the xhr object and attach an event listener to the progress event. See the reference
Add a div progress to your html
<div class="progress"></div>
<style>
.progress {
width: 0;
height: 4px;
background: black;
transition: width .3s linear;
}
</style>
Then change your ajax request with something like this :
$.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);
$('.progress').css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('.progress').fadeOut();
}
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
type: 'POST',
url: "your-url",
data: data,
success: function (data) {}
});