0

FilesList を読み取り、画像を IMG html オブジェクトに表示する Jquery 関数を取得しました。

function load_images(files) {
    for (var i = 0; i < files.length; i++) {
        // Validate the image type
        if(validate_file(files[i])) {
            var reader = new FileReader();
            reader.onload = function(e) {    
                $(".upload_thumbnails").append(render_thumb(e.target.result, i)); // Return a string with the img object
            };
        } 
        reader.readAsDataURL(f);
    } 
}

しかし、私の画像はfileListの順番で追加されていません。fileList (var ファイル) は、複数入力ファイルの html オブジェクトによって実装されます。

何か考えはありますか？

4

1 に答える 1

1

メソッドreadAsDataURLは非同期であるため、データをロードするための多くのリクエストがループで作成されますが、メソッドが非同期であるため、onloadコールバックが呼び出される順序を知る方法はありません。動作は非決定論的です。

これは、すべての要素をインデックスとともに配列に格納し、すべての画像が完全に読み込まれたときに実際にすべての画像をレンダリングすることで解決できます。

もう 1 つの方法は、リクエストの開始時にプレースホルダー div を作成し、onload コールバックのクロージャーでそれをキャプチャすることです。次に、そのdivに画像を追加できます。これにより、必要な動作が発生します。

このような：

function load_images(files) {
    for (var i = 0; i < files.length; i++) {
        // Validate the image type
        if(validate_file(files[i])) {
            var reader = new FileReader(),
                div    = $("<div></div>");
            $(".upload_thumbnails").append(div);            

            reader.onload = function(e) {    
                div.append(render_thumb(e.target.result, i)); // Return a string with the img object
            };
        } 
        reader.readAsDataURL(f);
    } 
}
于 2013-11-04T22:58:45.730 に答える