複数アップロードした画像ファイルの縦横サイズが1ファイル目だけ取得できない

Question

以下のようにアップロードファイルを取得して、ファイルサイズを取得しています。

$('form').on('change', 'input[type="file"]', function (e) {
    var upfileLength = e.target.files.length;

    for (var i = 0; i < upfileLength; i++) {
        var file = e.target.files[i],
            reader = new FileReader();
        var img = new Image();
        
        //img.src = file;
        //console.log(img.width);
        reader.onload = (function () {
            return function (e) {
                // ファイルサイズ
                img.src = e.target.result;
                console.log(img.width+':'+img.height);
            };
        })(file);
        reader.readAsDataURL(file);
    }

});

ファイルを3つ指定したとすると以下のようにコンソールに出力されます。

0:0
275:183
217:233

また、1ファイルのみ指定した場合は、何度か他ファイルを選択した後に取得できるようになります。

1ファイル目のみ取得できない原因は何なのでしょうか？

Comments

[yambejp]

そもそもアップロードしていません

[ryu_t]

その通りですね。失礼いたしました。

Answer 1

1ファイル目のみ取得できない原因は何なのでしょうか？

1. 画像も非同期処理だからです。

let img = new Image();
img.onload = () => {
  console.group( img.src ); // ここも確認を
  console.log( img.width, img.height )
  console.groupEnd();
}
img.src = e.target.result;

Comments

[ryu_t]

ご回答ありがとうございました。

Answer 2

スコープの問題です、varをletに変えてください

Comments

[yambejp]

$(function(){
$('form').on('change', 'input[type="file"]', function (e) {
var upfileLength = e.target.files.length;
for (let i = 0; i < upfileLength; i++) {
let file = e.target.files[i];
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
console.log([file.name,img.width,img.height]);
};
reader.readAsDataURL(file);
}
});
});

[yambejp]

どうせなら、こっちのほうがよいかも
$(function(){
$('form').on('change', 'input[type="file"]',function (){
Array.from($(this).prop('files')).forEach(function(file){
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
img.onload=function(){
console.log([file.name,img.width,img.height]);
}
};
reader.readAsDataURL(file);
});
});
});

[ryu_t]

ご回答ありがとうございました。