javascript - example - El progreso de carga XHR es 100% desde el principio

xmlhttprequest example

Question

Estoy probando la nueva función XMLHTTPRequestUpload para cargar algunos archivos en un script php, en general funciona bien, la carga comienza, recibo la respuesta final, etc., pero el progreso no parece funcionar.

Viendo que el evento ha cargado el valor - En Firefox parece que obtengo un valor aleatorio entre 0 y el tamaño del archivo; en Chrome (donde trabajo en su mayoría) obtengo el tamaño total del archivo, aunque el readystate no haya alcanzado el ''4'' y la ventana Herramientas del desarrollador aún muestre el archivo que se está cargando.

¿Algunas ideas?

Aquí está mi código:

var xhr = new XMLHttpRequest()

xhr.upload.addEventListener(''progress'', function(event) {
    if (event.lengthComputable) {
        $(''ajaxFeedbackDiv'').innerHTML = event.loaded + '' / '' + event.total;
    }
}, false);

xhr.onreadystatechange = function(event) {
    if (event.target.readyState == 4) {
        updateFileList();
    }
};

xhr.open("POST", "_code/upload.php");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("X-File-Size", file.size);
xhr.setRequestHeader("X-File-Type", file.type);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr(file);

Muchas gracias

Ben

Answer 1

Me encontré con un problema similar, donde mi función de controlador de eventos para eventos de progress en XMLHttpRequest se ejecutó solo una vez, cuando se completó la carga.

La causa del problema terminó siendo simple: en Google Chrome (posiblemente también en otros navegadores, no probé), el evento de progress solo se activará en sucesión si la carga se ha ejecutado durante uno o dos segundos. En otras palabras, si su carga finaliza rápidamente, entonces probablemente solo obtendrá un evento de progress 100%.

Aquí hay un ejemplo de código cuyo evento de progress solo se dispara una vez al 100% ( https://jsfiddle.net/qahs40r6/ ):

$.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;
        console.log("Upload ", Math.round(percentComplete*100) + "% complete.");
      }
    }, false);
    return xhr;
  },
  type: ''POST'',
  url: "/echo/json/",
  data: {json: JSON.stringify(new Array(20000))}
});

Salida de consola:

Upload  100% complete.

Pero si agrega un cero adicional al tamaño de la matriz (aumentando el tamaño de la carga útil en un factor de 10 - https://jsfiddle.net/qahs40r6/1/ ):

$.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;
        console.log("Upload ", Math.round(percentComplete*100) + "% complete.");
      }
    }, false);
    return xhr;
  },
  type: ''POST'',
  url: "/echo/json/",
  data: {json: JSON.stringify(new Array(200000))}
});

Entonces obtienes la progresión normal de progress eventos de progress :

Upload  8% complete.
Upload  9% complete.
Upload  19% complete.
Upload  39% complete.
Upload  50% complete.
Upload  81% complete.
Upload  85% complete.
Upload  89% complete.
Upload  100% complete.

Este comportamiento depende de la velocidad de su conexión a Internet, por lo que su millaje variará. Por ejemplo, si toma el primer ejemplo y usa Chrome Developer Tools para ralentizar su conexión a un "Slow 3G simulado", verá la serie de eventos de progress .

De manera similar, si está desarrollando localmente y cargando datos a un servidor web local, es probable que nunca vea eventos de progress porque la carga terminará instantáneamente. Esto es probablemente lo que @brettjonesdev estaba viendo en las implementaciones de productos remotos localhost vs.

Answer 2

También recientemente tuve algunas dificultades para configurar un detector de eventos para eventos XHR en progreso. Terminé implementándolo como una función anónima, que funciona maravillosamente:

xhr.upload.onprogress = function(evt)
{
    if (evt.lengthComputable)
    {
        var percentComplete = parseInt((evt.loaded / evt.total) * 100);
        console.log("Upload: " + percentComplete + "% complete")
    }
};

Sin embargo, me topé con muchos otros errores en el camino, así que es muy probable que uno de ellos haya estado tropezando con mi oyente del evento. La única otra diferencia entre lo que tienes allí y mi configuración es que estoy usando xhr.sendAsBinary ().