XMLHttpRequest en Google-Chrome no está reportando eventos de progreso

Question

Hola a 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 servidor responde a la solicitud OPCIONES inicial para upload.aspx con 200 y el Access-Control-Permita -Origin: * y luego aparece la segunda solicitud POST

Todo parece funcionar y funciona muy bien en FireFox, pero en G Chrome no se llama al controlador updateProgress pero solo una vez y luego el lengthComputable es falso.

necesitaba el-Allow-Access-Control Origen: * porque se trata de una llamada de dominios cruzados, el padre de la escritura es un recurso en un servidor diferente, entonces el dominio upload.aspx

Alguien me puede dar alguna pistas, consejos, ayuda por favor? ¿Es este un problema conocido con G Chrome?

¡Gracias! Ova

Answer 1

En primer lugar, asegúrese de que "www.example.com" se añade a la manifest.json, así:

manifest.json

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

entonces creo que su ejemplo debería funcionar.

For more information about using xhr in google chrome extensions the docs are here.

También vale la pena echar un vistazo a the CSP docs si lo que proporcioné anteriormente no.

Answer 2

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

XMLHttpRequest.cargar Compatibilidad

has necesitado escuchar para el progreso directamente en la xhr:

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

Answer 3

utilizo jQuery para el progreso de esa manera:

$.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; 
     }, 

Answer 4

creo que tengo una solución para su problema
No sé qué hay detrás de esta función "generateRandomData()"

var data = generateRandomData(currentPayloadId) 

Se está trabajando cuando cambio en esto:

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

pequeña explicación: Es necesario manualmente para anexar al formulario de datos de un formulario de entrada de archivos, donde fileToUpload es <input type="file" name="fileToUpload" id="fileToUpload" />
Y en su función updateProgress en IF parte que se puede añadir algo como esto para seguir el progreso console.log(evt.total +" - "+ evt.loaded)

esto es trabajar en Google Chrome navegador. He probado en la nueva versión del navegador 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 navegador.

Todo un fragmento de código se busca como esto

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

Answer 5

he tenido este problema cuando la página de su están cargando no contiene un

Content-Length: 12345 

en la cabecera, donde 12345 es el duración de la respuesta en bytes. Sin un parámetro de longitud, la función de progreso no tiene nada en qué trabajar.