複数ファイルアップロードのjqueryで、ファイルのlastModifiedがすべて同じになるのを解消したい

Question

##わからないこと
いつもお世話になっております。
この度ファイルを複数アップロードさせる際に、jqueryでforをループさせています。
その中でそれぞファイルのlastModifiedを取得しようとしているのですが、すべて同じ値になってしまいます。
その原因はどこにあるのでしょうか？

ご教授いただければ幸いです。

$('#uploadName').on('change', function(event){
    var $input = $(this);
    var files = event.target.files;
    $li    = $input.closest('.each_file');
    for (var i = 0, f; f = files[i]; i++) {
        // 一件ずつアップロード
        imageFileUpload(f);
        var imgUrl = '{!!url("/img/car/cv/' + id + '/' + fileName + '")!!}';
        var reader = new FileReader;
        reader.readAsDataURL(f);
        reader.onloadend = function(){
            var fileReader = this;
            if(fileReader.result){
                var thumb = '<div style="margin: 15px 10px 0 10px;width:145px;float: left;" class="thumbnail box"><a href="' + fileReader.result + '"><img src="' + fileReader.result + '" width="145px" height="150px" style="max-width: 145px; max-height: 150px;height: -webkit-fill-available;margin-top:5px;" alt="'+ i +'"><input type="hidden" name="id" value="{{request()->input('id')}}"><input type="hidden" name="filename" value="' + imgUrl + '"><input type="hidden" name="filetime" value="' + filetime + '"><span style="width: 70px; height: 19px; text-align: center; margin-top: 5px;margin: 0 auto;float: left;" class="del-button ui-opaimg">確認</span></a><span style="width: 70px; height: 19px; text-align: center; margin-top: 5px;margin: 0 auto;float: right;" class="delete_btn del-button ui-opaimg">削除</span></div>';
                $li.append(thumb);
            }
        };
    }
});
// ファイルアップロード
function imageFileUpload(f) {
    // entrant_id取得
    var id = $("#id").val();
    var fd = new FormData();
    fd.append('img_file', f);
    fd.append('id', id);
    fileName = f.name;
    filetime = f.lastModified;
    // ファイルアップロード時刻を取得
    fd.append("img_file[]", filetime);
    fd.append("book", 'cv');
    $.ajax({
        url: "{{action('PorController@fileUpload')}}",
        type: 'POST',
        dataType: 'html',
        data: fd,
        processData: false,
        contentType: false,
        timeout: 10000,
    })
    // 失敗時
    .fail(function(jqXHR, statusText, errorThrown){
        console.log(jqXHR);
        alert('タイムアウトしました');
    })
    // 成功時
    .done(function(data, textStatus, jqXHR){
        console.log(textStatus);
        if(textStatus == 'success') {
            alert('succccccceeeeeeessssss!!');
            return true;
        } else {
            alert(data);
            return false;
        }
    });
}

<label style="text-align: center; width: 150px; margin: 0 auto; padding: 10px;" class="bt-photo02 ui-bt-nomal ui-opaimg">経歴書を添付する
                    <input type="file" id="uploadName" class="input_file" name="img_file[]" value="経歴書をアップロード" style="display:none;" multiple>
                    <input type="hidden" id="id"name="id" value="{{request()->input('id')}}">
                </label>

※コードが不足していましたら追加いたします。

何卒よろしくお願い申し上げます。

Answer 1

この問題は関数imageFileUpload内で利用している変数filetimeがグローバル変数(もしくは上位スコープで定義されたもの)である点と, サムネイルの生成処理がFileReaderオブジェクトにより非同期で行われていることで発生しています.

1. まず, $('#uploadName').on('change',でのforループ内でimageFileUploadメソッドとファイルの内容をFileReaderオブジェクトで読み込む処理を行っていますが, onloadendに登録したリスナ関数(サムネイル生成)はその実行をスケジュールしているだけで, この時点では実行されていません.
2. imageFileUploadにおいてはグローバル変数filetimeにファイルの最終更新日時を代入します. これをforループで繰り返しているため, 結果最後のファイルの最終更新日時が格納されることになります.
3. その後ファイルの読み込みが完了すると, 一斉にサムネイルの生成処理が実行されます. すると, 先ほどのfiletime変数の内容をHTMLに追加していくので, 全て同じ日時が出力されることになります（ファイル名についても同様）.

対処策としては, forループ内でスコープを分離し, Fileオブジェクトを識別できるようにする方法でしょうか.

$('#uploadName').on('change', function(event){
    var $input = $(this);
    var files = event.target.files;
    $li    = $input.closest('.each_file');
    for (var i = 0, f; f = files[i]; i++) {
        // 一件ずつアップロード
        (function(f){//スコープを分離→変数fileName/filetimeをFileオブジェクトごとに用意する
          imageFileUpload(f);
          //ファイル名・最終更新日時はここで取得する
          var fileName = f.name;
          var filetime = f.lastModified;
          var imgUrl = '{!!url("/img/car/cv/' + id + '/' + fileName + '")!!}';
          var reader = new FileReader;
          reader.readAsDataURL(f);
          reader.onloadend = function(){
              var fileReader = this;
              if(fileReader.result){
                  var thumb = '<div style="margin: 15px 10px 0 10px;width:145px;float: left;" class="thumbnail box"><a href="' + fileReader.result + '"><img src="' + fileReader.result + '" width="145px" height="150px" style="max-width: 145px; max-height: 150px;height: -webkit-fill-available;margin-top:5px;" alt="'+ i +'"><input type="hidden" name="id" value="{{request()->input('id')}}"><input type="hidden" name="filename" value="' + imgUrl + '"><input type="hidden" name="filetime" value="' + filetime + '"><span style="width: 70px; height: 19px; text-align: center; margin-top: 5px;margin: 0 auto;float: left;" class="del-button ui-opaimg">確認</span></a><span style="width: 70px; height: 19px; text-align: center; margin-top: 5px;margin: 0 auto;float: right;" class="delete_btn del-button ui-opaimg">削除</span></div>';
                  $li.append(thumb);
              }
          };
        })(f);
    }
});

NOTE:
つまるところ, ループ処理におけるイベントハンドラの取扱いにおいて頻出する問題であるため, 関連する文献は相応に見つかると思います.

Comments

[退会済みユーザー]

ご回答ありがとうございます。
ご指摘頂いた通り、forループ内の処理をfunctionで囲んでみましたが、それでもfiletimeはすべて同じ値になってしまっていました。

[defghi1977]

途中
var fileName = f.name;
var filetime = f.lastModified;
の2行を追加しています.

[退会済みユーザー]

ご指摘ありがとうございます！
無事望んだ値を取得することができました。
イベントハンドラ含めjqueryに不慣れなので、NOTEにてアドバイスをしてくださった点から勉強していきたいと思います。
ありがとうございました