Para poder visualizar el porcentaje completado de una petición POST o GET realizada con ajax, podemos utilizar la siguiente función:
De esta forma si añadimos la barra de progress bar dentro de las funciones upload y download, podremos visualizar de una forma mas elegante, con la siguiente linea:$.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); //Upload progress xhr.upload.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with upload progress console.log(percentComplete); } }, false); //Download progress xhr.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with download progress console.log(percentComplete); } }, false); return xhr; }, type: 'POST', url: "/", data: {}, success: function(data){ //Do something success-ish } });
$('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%');
No hay comentarios:
Publicar un comentario