質問: '' + file.name + ''; $('#preview').append(img); } fr.readAsDataURL(file); }
回答: 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 = '' + file.name + ''; $('#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 = '' + file.name + ''; $('#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 = '' + fnm + ''; $('#preview').append(img); } ``` で行けると思います。