Aprenda a obtener el progreso de una subida o descarga con jQuery ajax o XMLHttpRequest de manera sencilla.

Aunque algunos navegadores muestran el progreso en la esquina inferior derecha de la pantalla, es posible que desee recuperar estos valores y usarlos en su proyecto para mostrarle al usuario el progreso de la descarga o carga con su propia interfaz de usuario.

Para recuperar el progreso de una carga o descarga (solicitud) con ajax, necesitamos manipular el objeto global xhr (XMLHttpRequest) en el documento.

Si no usamos jQuery (vanillaJS), el algoritmo es realmente simple y fácil de entender:

function updateProgress(evt){
  if (evt.lengthComputable){
     var percentComplete = (evt.loaded / evt.total)*100;  
      console.log(percentComplete+"% completed");
   } 
}

var request = new XMLHttpRequest(); 
request.onprogress=updateProgress;

El evento onprogress activará la updateProgressfunción de la solicitud ( eventos de descarga y carga ) 

Pero si usamos jQuery, necesitamos usar la opción xhr que se puede configurar en la construcción ajax:

$.ajax({
    xhr: function(){
       var xhr = new window.XMLHttpRequest();
         // Manejar el progreso
         // progreso subida
       xhr.upload.addEventListener("progress", function(evt){
           if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              //Do something with upload progress
              console.log(percentComplete);
           }
       }, false);
       // Progreso de descarga
       xhr.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              // Hacer algo con el progreso de la descarga
              console.log(percentComplete);
            }
       }, false);

       return xhr;
    },
    complete:function(){
        console.log("Request finished.");
    }
});

La propiedad  ProgressEvent.lengthComputable de solo lectura es una bandera booleana que indica si el recurso tiene una longitud que se puede calcular. De lo contrario, la propiedad ProgressEvent.total no tiene un valor significativo y no podemos recuperar el progreso del proceso, en ambos casos, el progreso se recuperará fácilmente.

Versión de jQuery anterior

Si está usando jQuery <= 1.5, es posible que desee usar el siguiente código en su lugar, ya que la propiedad xhr no es compatible con estas versiones.

$.ajax({
    type: 'POST',
    url: "/",
    data: {},
    beforeSend: function(XMLHttpRequest){
        // Progreso subida
        XMLHttpRequest.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {  
                var percentComplete = evt.loaded / evt.total;
                // Haz algo con el progreso de subida
            }
        }, false); 
        // Progreso descarga
        XMLHttpRequest.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {  
                var percentComplete = evt.loaded / evt.total;
                // Hacer algo con el progreso de la descarga
            }
        }, false); 
    },
    success: function(data){
        // Haz algo cuando funciona
    }
});

El oyente se agregará directamente al XMLHttpRequest objeto que se recupera, incluso como primer parámetro en la devolución de llamada beforeSend de la llamada $.ajax.


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores