Con este código:

 $("#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) { } });

Obtengo un progreso agradable y fluido de la carga incluso con archivos bastante pequeños (es decir, 1-2 MB). En cambio con este otro código:

 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) { } });

El evento de progreso se activa solo al final de la carga, incluso con archivos bastante grandes (> 10 MB) que tardan varios segundos en completarse.

¿Qué me estoy perdiendo en la implementación pura de JQuery para obtener actualizaciones de progreso en pequeños fragmentos como lo hace el complemento AjaxForm?