Firefox XHR 没有触发上传进度事件答案

【问题标题】：Firefox XHR not firing upload progress eventsFirefox XHR 没有触发上传进度事件
【发布时间】：2012-05-17 06:31:37
【问题描述】：

相当直接的 HTML/JS ：

采用 Base64 编码的 PNG
将其转换为 blob
设置一个 img.src 来验证它是一个有效的 PNG
设置事件处理程序后通过 XHR 上传

在 Firefox 12 中，我收到“loadstart”和“loadend”事件，但没有“progress”事件。

在 Chrome 20 中一切正常。

此文件名为“image.html”，因此它只是上传到自身进行测试。

我也尝试设置 content-legnth 标头，但这并没有改变 Firefox 中的结果，所以我将其注释掉。

谁能验证相同的结果？我错过了什么吗？

谢谢

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

【问题讨论】：

标签： events firefox upload xmlhttprequest progress

【解决方案1】：

是的，我有同样的问题，当上传文件大小小于 100Kb 时，我重写了加载事件以更改进度条。你可以看到它here。

【讨论】：

请在此处发布相关代码，而不是提供当前未显示任何内容的链接

【解决方案2】：

Firefox 使用的网络库不会向消费者（比如 Firefox）公开上传进度，因此 Firefox 目前无法触发上传进度事件。

编辑：看来我错了；显然，我正在记住前一段时间存在的代码。然后我尝试了上面的测试用例......在 Firefox 12 中它的行为与描述的一样，但在当前的每晚它会触发一个上传进度事件。

【讨论】：

来源是我对代码的记忆，似乎有问题。请参阅上面我的答案中的“编辑”。
非常感谢您的测试！我尝试在 HG 日志中查找错误报告或提交消息，但没有。哦，好吧。
嗯。这似乎奇怪的不一致。有时我看到一个进度事件，有时没有。让我深入研究一下。
啊，我明白这里发生了什么。如果在 loadstart 已经触发后有实际进度，则会有一个进度事件。如果事情发送得足够快，则可能没有。进度事件规范似乎说这是正确的行为。