O Firefox XHR não está disparando eventos de progresso de upload

Question

May 08, 2012, 08:26 PM

xmlhttprequest firefox upload events progress

O Firefox XHR não está disparando eventos de progresso de upload

HTML / JS bastante direto que:

Utiliza um PNG codificado em Base64Converte-o em um blobDefine um img.src para verificar se é um PNG válidoCarrega via XHR depois de definir manipuladores de eventos

No Firefox 12 eu recebo o "loadstart"e"loadend"eventos mas não"progresso"eventos.

No Chrome 20 tudo funciona bem.

Este arquivo é chamado "image.html", então ele é enviado para teste.

Eu também tentei configurar um cabeçalho de legenda de conteúdo, mas isso não alterou os resultados no Firefox, então eu comentei.

Alguém pode por favor verificar os mesmos resultados? Estou esquecendo de algo?

obrigado

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