Te daré el camino según ¿Cuál es la forma más limpia de obtener el progreso de la solicitud JQuery ajax?
JQuery
$(function()
{
$("#submit").click(function()
{
var titlee = $("#titlee").val();
var wtag = $("#wtag").val();
var dataString = 'titlee='+ titlee + '&wtag=' + wtag ;
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('.progress').addClass('hide');
}
}
}
}, 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: "c_insert_test.php",
data: dataString,
success: function (data) {
//Do something on success
}
});
return false;
});
});
.progress {
display: block;
text-align: center;
width: 0;
height: 3px;
background: red;
transition: width .3s;
}
.progress.hide {
opacity: 0;
transition: opacity 1.3s;
}
Esta puede ser una solución adecuada para hacer esto.