Firefox XHR no dispara los eventos de progreso de carga

Question

May 08, 2012, 08:26 PM

events xmlhttprequest firefox progress upload

Firefox XHR no dispara los eventos de progreso de carga

HTML / JS bastante sencillo que:

Toma un PNG codificado en Base64Lo convierte en una burbujaEstablece un img.src para verificar que es un PNG válidoSe carga a través de XHR después de configurar los controladores de eventos

En Firefox 12 me sale el "arranque de carga"y"carga"eventos pero no"Progreso" eventos.

En Chrome 20 todo funciona bien.

Este archivo se llama "image.html", por lo que solo se carga a sí mismo para su prueba.

También traté de establecer un encabezado de contenido, pero eso no cambió los resultados en Firefox, así que lo comenté.

¿Alguien por favor puede verificar los mismos resultados? ¿Me estoy perdiendo de algo?

Gracias

<code><!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>

var testPng64 = 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXUlEQVR42rVTgQkAIAjz+P4uggKjTU0pEGLopkxFWu9SepMgS3LUMRImAHEN7r+OUNeowMKfW3bVEUloBCuJdWQDztz/CZClYYKIInTC89m0EW0ei9JBXbnZa1x1A1Sh2i/qfsVWAAAAAElFTkSuQmCC';

function receiveImage(pngBase64) {
    console.log("receiveImage");

    var img = document.getElementById("webImg1");

    var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;
    var bb = new BlobBuilder();

    var byteString = window.atob(pngBase64);
    var ab = new ArrayBuffer(byteString.length); 
    var ia = new Uint8Array(ab); 
    for (var i = 0; i < byteString.length; i++) { 
        ia[i] = byteString.charCodeAt(i); 
    }

    bb.append(ab);

    var blob = bb.getBlob("image/png");

    var URL = window.URL || window.webkitURL;
    var imgUrl = URL.createObjectURL(blob);
    img.src = imgUrl;

    upload(blob);
}

function upload(blob) {
    console.log("upload");

    var xhr = new XMLHttpRequest();

    xhr.addEventListener("load", function(e) {
        console.log("xhr load");
    });

    xhr.upload.addEventListener("loadstart", function(e) {
       console.log("xhr upload loadstart");
       console.log(e); 
    }, false);

    xhr.upload.addEventListener("progress", function(e) {
       console.log("xhr upload progress");
       console.log(e); 
    }, false);

    xhr.upload.addEventListener("loadend", function(e) {
       console.log("xhr upload loadend");
       console.log(e); 
    }, false);

    xhr.open("POST", "image.html", true);
    //xhr.setRequestHeader("Content-Length", blob.size);

    xhr.send(blob);
}
</script>
</head>
<body>
    <div>
        <img id="webImg1" src="about:blank" width="64" height="auto"/>
        <progress id="progress1" min="0" max="100" value="0" style="width: 64px;">0%</progress>
    </div>
    <div><button onclick="receiveImage(testPng64)">Load</button></div>
</body>
</html>
</code>