回答編集履歴

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

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);

}

```

で行けると思います。