2

私は次のコードを持っています：

oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
    $("#preview").append("<img src='" + oFREvent.target.result + "' />");
};

function loadImageFile() {
    if (document.getElementById("uploadImage").files.length === 0) { return; }

    $.each(document.getElementById("uploadImage").files, function (index, value) {
        if (!rFilter.test(value.type)) { alert("You must select a valid image file!"); return; }
        oFReader.readAsDataURL(value);
    });
}

これは、ファイルタイプの入力にドラッグされた画像のコレクションを取得し、それらの画像をdivでプレビューすることを目的としています。私の問題は、これを実行すると、最後の画像のみが表示されることです。JavaScriptにブレークポイントを追加してコードをステップ実行すると、両方の画像が表示されます。

oFReader.onload非常に速く2回呼び出されているため、これが発生していると思います。競合を回避するために、 setTimeoutを使用するかoFReader、ループ内で宣言することを検討しましたが、より洗練された解決策があるかどうか疑問に思っていますか？

4

1 に答える 1

3

読み取るファイルごとに個別のFileReaderオブジェクトが必要です。

.readDataAsURL()非同期メソッドです。あなたがそれを呼んだ後、それはしばらくして終了します。ループでは、.each()前のファイルが完了する前に新しいファイルを読み取ろうとしているため、完了する前にファイルを停止します。

あなたはこのようなことをすることができます：

function loadImageFile() {
    if (document.getElementById("uploadImage").files.length === 0) { return; }

    $.each(document.getElementById("uploadImage").files, function (index, value) {
        var oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

        if (!rFilter.test(value.type)) { alert("You must select a valid image file!"); return; }
        oFReader.onload = function (oFREvent) {
            $("#preview").append("<img src='" + oFREvent.target.result + "' />");
        };
        oFReader.readAsDataURL(value);
    });
}
于 2012-08-30T01:52:01.743 に答える