Firefox XHR не запускает события прогресса загрузки
Довольно простой HTML / JS, который:
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В Firefox 12 я получаю & quot;loadstart& Quot; и & quot;loadend& Quot; события, но не & quot;progress& Quot; События.
В Chrome 20 все отлично работает.
Этот файл называется & quot; image.html & quot; так что он просто загружает себя для тестирования.
Я также попытался установить заголовок content-legnth, но это не изменило результаты в Firefox, поэтому я прокомментировал его.
Can anyone please verify the same results? Am I missing something?
Спасибо
<code><!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>
</code>