0

次のような非常に単純な HTML/JS:

  • Base64 でエンコードされた PNG を受け取ります
  • それをブロブに変換します
  • 有効な PNG であることを確認するために img.src を設定します
  • イベントハンドラを設定した後、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>
4

2 に答える 2

1

Firefox が使用するネットワーク ライブラリは、アップロードの進行状況をコンシューマ (Firefox など) に公開しないため、現在、Firefox がアップロード進行状況イベントを発生させる方法はありません。

編集：私が間違っていたようです。どうやら、少し前に存在していたコードを思い出していたようです。そこで、上記のテストケースを試してみました... Firefox 12 では説明どおりに動作しますが、現在のナイトリーではアップロード進行状況イベントが発生します。

于 2012-05-09T01:45:15.753 に答える
1

はい、私は同じ問題を抱えており、アップロード ファイルのサイズが 100Kb 未満の場合に進行状況バーを変更するようにロード イベントを書き直しました。ここで見ることができます。

于 2013-02-05T09:54:36.213 に答える