Firefox XHR 没有触发上传进度事件 [英] Firefox XHR not firing upload progress events
问题描述
相当直接的 HTML/JS :
- 采用 Base64 编码的 PNG
- 将其转换为 blob
- 设置一个 img.src 来验证它是一个有效的 PNG
- 设置事件处理程序后通过 XHR 上传
在 Firefox 12 中，我收到loadstart"和loadend"事件，但没有progress"事件.
在 Chrome 20 中一切正常.
此文件名为image.html"，因此它只是上传到自身进行测试.
我也尝试设置 content-legnth 标头，但这并没有改变 Firefox 中的结果，所以我将其注释掉.
谁能验证相同的结果?我错过了什么吗?
谢谢
<!DOCTYPE html><html><头><title>测试</title><脚本>VAR testPng64 = 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXUlEQVR42rVTgQkAIAjz + P4uggKjTU0pEGLopkxFWu9SepMgS3LUMRImAHEN7r + OUNeowMKfW3bVEUloBCuJdWQDztz/CZClYYKIInTC89m0EW0ei9JBXbnZa1x1A1Sh2i/qfsVWAAAAAElFTkSuQmCC';函数接收图像(pngBase64){console.log("receiveImage");var img = document.getElementById("webImg1");var BlobBuilder = window.MozBlobBuilder ||window.WebKitBlobBuilder ||窗口.MSBlobBuilder ||窗口.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 ||窗口.webkitURL;var imgUrl = URL.createObjectURL(blob);img.src = imgUrl;上传(blob)；}函数上传(blob){console.log("上传");var xhr = new XMLHttpRequest();xhr.addEventListener(加载"，函数(e){console.log("xhr 加载");});xhr.upload.addEventListener("loadstart", function(e) {console.log("xhr 上传加载开始");控制台.log(e);}， 错误的);xhr.upload.addEventListener("进度", function(e) {console.log("xhr 上传进度");控制台.log(e);}， 错误的);xhr.upload.addEventListener("loadend", function(e) {console.log("xhr 上传加载");控制台.log(e);}， 错误的);xhr.open("POST", "image.html", true);//xhr.setRequestHeader("内容长度", blob.size);xhr.send(blob);}</脚本></头><身体><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)">加载</button></div></身体></html> 解决方案 Firefox 使用的网络库不会将上传进度暴露给消费者(比如 Firefox)，因此 Firefox 无法触发上传进度事件时刻.
看来我错了；显然，我正在记住前一段时间存在的代码.然后我尝试了上面的测试用例......在 Firefox 12 中它的行为与描述的一样，但在当前的每晚它会触发一个上传进度事件.
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>
解决方案 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.
这篇关于Firefox XHR 没有触发上传进度事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
