jsで複数画像のファイル名、画像の表示

Question

jsで複数画像を表示する方法について質問です。

input type=file でファイルを選択された時に下記の処理が動くようにして選択画像を表示させています。
イメージは選択された画像の分だけファイル名、画像というように並べていきたいです。
下記の処理を行うと画像とファイル名が表示されます。
ただし、ファイル名が全て最後に選択した画像のファイル名となってしまいます。

足りない情報があれば追記します。
宜しくお願いします。

// userfileは選択されたファイルオブジェクトのIDです
    var files = document.getElementById('userfile').files;
    for (var i = 0; i < len; i++) {
      var file = files[i];
      var fr = new FileReader();
      fr.onload = function(e) {
        var src = e.target.result;
        var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'></div></div>';
        $('#preview').append(img);
      }
      fr.readAsDataURL(file);
    }

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

forループ内で非同期な関数を定義して実行するとループが先に終了し、後から非同期で関数が呼ばれるためです。
なので、for文で囲ってる内容を別の関数に定義して、その関数を呼ぶか、クロージャーを使うかのいずれかの方法をとる必要があります。

// 別関数を定義して呼ぶ
for(var i = 0; i < len; i++ ) {
  fileLoad(files[i]);
}

function fileLoad(file) {
  var fr = new FileReader(); 
  fr.onload = function(e) { 
    var src = e.target.result; 
    var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'"></div></div>'; 
    $('#preview').append(img); 
  } 
  fr.readAsDataURL(file); 
}

// クロージャーを使用する
for(var i = 0; i < len; i++ ) {
  (function() {
    var j = i; // いったん変数をクロージャー内で再定義させる。
    var file = files[j]; 
    var fr = new FileReader(); 
    fr.onload = function(e) { 
      var src = e.target.result; 
      var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'"></div></div>'; 
      $('#preview').append(img); 
    } 
    fr.readAsDataURL(file); 
  })();
}

てか、そもそもとして、もしレガシーブラウザーは対象にしていないというのでしたら、

for(var i = 0; i < len; i++) {
  var fnm = files[i].name;
  var src = URL.createObjectURL(files[i]);
  var img = '<div><div>' + fnm + '</div><div><div><img src="'+ src +'"></div></div>';
  $('#preview').append(img); 
}

で行けると思います。