非常简单的HTML / JS:
在Firefox 12中,我收到“ loadstart ”和“ loadend ”事件,但没有“进度”事件。
在Chrome 20中,一切正常。
此文件名为“image.html”,因此它只会上传到自身进行测试。
我也试过设置一个内容-ththnth标题,但这并没有改变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>
答案 0 :(得分:1)
Firefox使用的网络库不会向用户公开上传进度(比如说Firefox),因此Firefox目前无法触发上传进度事件。
编辑:看起来我错了;很久以前,我正在记住它存在的代码。所以我尝试了上面的测试用例......在Firefox 12中它的行为如上所述,但是在当前的夜晚,它会触发上传进度事件。
答案 1 :(得分:1)
是的,我遇到了同样的问题,当上传文件大小小于100Kb时,我重写了load事件来更改进度条。你可以看到它here。