回答編集履歴

1 ダブルクォーテーションぬけ修正

turbgraphics200

turbgraphics200 score 4221

2017/01/18 17:05  投稿

forループ内で非同期な関数を定義して実行するとループが先に終了し、後から非同期で関数が呼ばれるためです。
なので、for文で囲ってる内容を別の関数に定義して、その関数を呼ぶか、クロージャーを使うかのいずれかの方法をとる必要があります。
```js
// 別関数を定義して呼ぶ
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>';
   var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'"></div></div>';
   $('#preview').append(img);
 }
 fr.readAsDataURL(file);
}
```
```js
// クロージャーを使用する
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>';
     var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'"></div></div>';
     $('#preview').append(img);
   }
   fr.readAsDataURL(file);
 })();
}
```
てか、そもそもとして、もしレガシーブラウザーは対象にしていないというのでしたら、
```js
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>';
 var img = '<div><div>' + fnm + '</div><div><div><img src="'+ src +'"></div></div>';
 $('#preview').append(img);
}
```
で行けると思います。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る