Jquery - Peticiones Ajax con progress bar

Para poder visualizar el porcentaje completado de una petición POST o GET realizada con ajax, podemos utilizar la siguiente función:

$.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
  }
});

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:

$('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%');

Related Posts

• 
  Jquery - Como crear un plugin en Jquery
• 
  Bootstrap3 - Editar contenido ventana modal
• 
  TinyMCE en Codeigniter
• 
  Introducción a JQUERY