Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

139
Vistas
Ajax upload progress fires in different way than AjaxForm plugin

With this code:

$("#myform").ajaxForm({
    beforeSubmit: function() {
        let percentVal = '0%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
    },

    uploadProgress: function(event, position, total, percentComplete) {
        let percentVal = percentComplete + '%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
    },

    success: function(response) {
        let percentVal = '100%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
    },

    complete: function(xhr) {
    }
});

I get a nice and smooth progress of the upload even with quite small files (i.e. 1-2 MB). Instead with this other code:

const formData = new FormData($("#myform")[0]);

$.ajax({
    xhr: function() {
        xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percentComplete = Math.floor(e.loaded / e.total) * 100;
                const percentVal = percentComplete + '%';
                bar.width(percentVal)
                bar.html(percentVal).attr('aria-valuenow', percentVal);
            }
        }, false);
        return xhr;
    },
    type: 'POST',
    url: action,
    data: formData,
    contentType: false,
    processData: false,
    cache: false,

    beforeSend: function() {
        let percentVal = '0%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
    },

    success: function(data, status, xhr) {
        let percentVal = '100%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
        alertOk.show();
    },

    complete: function(xhr) {
    }
});

The progress event fires only at the end of the upload even with quite large files (> 10 MB) that takes several seconds to be completed.

What am I missing in the pure JQuery implementation in order to get progress updates in small chunks like the AjaxForm plugin does?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda