Events Firefox XHR未触发上载进度事件
非常直截了当的HTML/JS: 采用Base64编码的PNG 将其转换为水滴 设置img.src以验证它是否为有效的PNG 设置事件处理程序后,通过XHR上传 在Firefox 12中,我得到loadstart和loadend事件,但没有进度事件 在Chrome 20中,一切正常 该文件名为image.html,因此它只需上传到自身进行测试 我还尝试设置一个content-legnth标题,但这并没有改变Firefox中的结果,所以我将其注释掉 有人能验证同样的结果吗?我错过什么了吗 谢谢Events Firefox XHR未触发上载进度事件,events,firefox,upload,xmlhttprequest,progress,Events,Firefox,Upload,Xmlhttprequest,Progress,非常直截了当的HTML/JS: 采用Base64编码的PNG 将其转换为水滴 设置img.src以验证它是否为有效的PNG 设置事件处理程序后,通过XHR上传 在Firefox 12中,我得到loadstart和loadend事件,但没有进度事件 在Chrome 20中,一切正常 该文件名为image.html,因此它只需上传到自身进行测试 我还尝试设置一个content-legnth标题,但这并没有改变Firefox中的结果,所以我将其注释掉 有人能验证同样的结果吗?我错过什么了吗 谢谢 &l
<!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>
比如说,Firefox使用的网络库不会向Firefox这样的消费者公开上传进度,因此Firefox目前无法启动上传进度事件
编辑:看来我错了;很明显,我记得代码是前一段时间存在的。然后我尝试了上面的测试用例。。。在Firefox 12中,它的行为如所述,但在当前的夜间,它会触发上载进度事件。是的,我也有同样的问题,我重写了加载事件,以便在上载文件大小小于100Kb时更改进度条。您可以看到。源代码是我的代码记忆,它似乎有故障。请参阅上面我的答案中的编辑。非常感谢您的测试!我试着在HG日志中查找bug报告或提交消息,但什么都没有。哦,嗯。这似乎奇怪地前后矛盾。有时我看到一个进步事件,有时没有。让我深入一点。啊,我知道这里发生了什么。如果在loadstart已启动后有实际进度,则将出现进度事件。如果发送的速度足够快,可能就没有了。进度事件规范似乎说这是正确的行为。请在此处发布相关代码,而不是提供当前未显示任何内容的链接