Firefox XHR not firing upload progress events

问题

Pretty straight-forward HTML/JS that:

Takes a Base64-encoded PNG
Converts it to a blob
Sets an img.src to verify that it's a valid PNG
Uploads it via XHR after setting event handlers

In Firefox 12 I get the "loadstart" and "loadend" events but no "progress" events.

In Chrome 20 everything works fine.

This file is named "image.html" so it just uploads to itself for testing.

I also tried setting a content-legnth header but that didn't change the results in Firefox so I commented it out.

Can anyone please verify the same results? Am I missing something?

Thanks

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

回答1:

The networking library Firefox uses does not expose upload progress to consumers (like Firefox, say), so there is no way for Firefox to fire upload progress events at the moment.

Edit: Looks like I was wrong; I was remembering code as it existed a while ago, apparently. So then I tried the testcase above... in Firefox 12 it behaves as described, but in a current nightly it fires an upload progress event.

回答2:

Yes, I have the same problem and I rewrite the load event to change the progress bar when the upload file size is less than 100Kb. You can see it here.

来源：https://stackoverflow.com/questions/10504292/firefox-xhr-not-firing-upload-progress-events

标签

events

firefox

upload

xmlhttprequest

progress