XMLHttpRequest en google-chrome no informa events de progreso

Hola, todos tengo este código:

function test() { req = new XMLHttpRequest(); req.upload.addEventListener("progress", updateProgress, false); req.addEventListener("readystatechange", updateProgress, false); req.addEventListener("error", uploadFailed, false); req.addEventListener("abort", uploadCanceled, false); var data = generateRandomData(currentPayloadId); totalSize = data.length; req.open("POST", "www.mydomain.com/upload.aspx"); start = (new Date()).getTime(); req.send(data); } function updateProgress(evt) { if (evt.lengthComputable) { total = totalSize = evt.total; loaded = evt.loaded; } else { total = loaded = totalSize; } } 

Además, mi server responde a la request OPTIONS inicial para upload.aspx con 200 y Access-Control-Allow-Origin: * y luego ocurre la segunda request POST

Todo parece funcionar y está funcionando muy bien en Firefox, pero en G Chrome no se llama al controller updateProgress, pero solo una vez y, a continuación, el lengthComputable es falso.

Necesitaba Access-Control-Allow-Origin: * porque esta es una llamada entre dominios, el script padre es un recurso en un server diferente, luego el dominio upload.aspx

¿Alguien puede darme algunas pistas, consejos, ayuda por favor? ¿Es este un problema conocido con G Chrome?

¡Gracias! Óvulo

5 Solutions collect form web for “XMLHttpRequest en google-chrome no informa events de progreso”

En primer lugar, asegúrese de que se agrega "www.example.com" al manifest.json , así:

manifest.json

  { .. "permissions": [ "http://www.example.com/", "https://www.example.com/", ], .. } 

Entonces creo que tu ejemplo debería funcionar.

Para get más información sobre el uso de xhr en las extensiones de google chrome, los documentos están aquí .

También vale la pena echarle un vistazo a los documentos de CSP si lo que proporcioné anteriormente no vale la pena.

Esto podría ser simplemente un problema de compatibilidad con la propiedad XMLHttpRequest.upload. Devuelve un object XMLHttpRequestUpload, pero si intenta encontrar esa especificación de object en MDN, no existe, entonces, ¿cómo sabemos qué browseres lo soportan completamente?

XMLHttpRequest.upload Compatibilidad Compatibilidad para la propiedad XMLHttpRequest.upload

¿Has intentado escuchar el progreso directamente en xhr?

 req.addEventListener("progress", updateProgress, false); 

Yo uso jQuery para un progreso como ese:

  $.ajax({ url : furl, type : method, data : data, //... }, xhr : function () { //upload Progress var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.addEventListener('progress', function (event) { var percent = 0; var position = event.loaded || event.position; var total = event.total; if (event.lengthComputable) { percent = Math.ceil(position / total * 100); } //update progressbar $(".progress-bar").css("width", + percent + "%"); $(" .status").text(position + " / " + total + " (" + percent + "%)"); }, true); } return xhr; }, 

Creo que tengo una solución para tu problema
No sé qué hay detrás de esta function "generateRandomData ()"

 var data = generateRandomData(currentPayloadId) 

Está funcionando cuando me cambio a esto:

 var data = new FormData(); data.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 

Pequeña explicación: debe agregar manualmente para formar datos un formulario de input de file, donde fileToUpload es <input type="file" name="fileToUpload" id="fileToUpload" />
Y en su function updateProgress en la parte IF puede agregar algo como esto para seguir el progreso de console.log(evt.total +" - "+ evt.loaded)
enter image description here

Esto está funcionando en el browser Google Chrome. He probado en la nueva versión del browser 57
Me hice un formulario de progreso de carga hace 4 años, lo que significa que este código también funciona en la versión anterior del browser.

Todo un fragment de código se verá así

 function test() { req = new XMLHttpRequest(); req.upload.addEventListener("progress", updateProgress, false); req.addEventListener("readystatechange", updateProgress, false); req.addEventListener("error", uploadFailed, false); req.addEventListener("abort", uploadCanceled, false); //var data = generateRandomData(currentPayloadId); var data = new FormData(); data.append("fileToUpload", document.getElementById('fileToUpload').files[0]); totalSize = data.length; req.open("POST", "www.mydomain.com/upload.aspx"); start = (new Date()).getTime(); req.send(data); } function updateProgress(evt) { if (evt.lengthComputable) { total = totalSize = evt.total; loaded = evt.loaded; console.log(evt.total +" - "+ evt.loaded) } else { total = loaded = totalSize; } } 

Tuve este problema cuando la página que estás cargando no contiene un

  Content-Length: 12345 

en el encabezado, donde 12345 es la longitud de la respuesta en bytes. Sin un parámetro de longitud, la function de progreso no tiene nada en qué trabajar.

  • ¿Problema con los valores de XMLHttpRequest.DONE?
  • XMLHttpRequest () y salida de file csv
  • La página congelación en XMLHttpRequest
  • XMLHttpRequest onprogress total siempre es 0 en Chrome
  • ¿Dónde puedo encontrar la implementación de XMLHttpRequest?
  • XMLHttpRequest siempre llama a "load" event listener, incluso cuando la respuesta tiene un estado de error
  • blockchain getjson javascript XMLHttpRequest
  • ¿Cómo cargo los datos de image binarys usando Javascript y XMLHttpRequest?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.