複数アップロードファイルを表示したい

Question

##1 前提・実現したいこと
お世話になっております。
アップロードする前に複数ファイルのファイル名を表示したいと考えております。

実現したいこと
DB等にアップロードする前に選択したファイル名の表示。
input入力項目の上あたりにファイル名を表示したい。

例
○○.txt
□□.jpg
以下、input入力項目

##2 発生している問題
単一での表示はできるが、複数表示ができない。
##3 該当のソースコード
選択ボタンを押したら、エクスプローラーが開いてファイルを選択する。

<tr class="tenpu_docs">
　<th class="v_top">添付資料</th>
     <td>
       <div class="file_row">
         <div class="file_wrapper">
          　<input type="file" name="tenpu_file[]" th:field="*{icon_file}" id="docs" th:path="*{icon_file}" multiple="multiple"/>
            <p class="file_name_keeper">&nbsp;</p><label for="docs">選択</label>
         </div>
       </div>
       <p style="color: #FF0000;" th:if="${#fields.hasErrors('*{icon_file}')}" th:errors="*{icon_file}"></p>
     </td>
</tr>

//アップロードファイル選択
$(document).on('change','tr.tenpu_docs input[type="file"]', function () {
    var files = $(this).prop('files');
    var len = $files.length;

    for (var i=0; i < len; i++) {
    	var fileData = $files[i];
	    var fileName = '<a th:href="#" target="_blank">'+fileData.name+'</a>';

	    //ファイル名を表示
	    $(this).closest('div').find('p.file_name_keeper').html(fileName).addClass('on_keep');
    }
})

##4 自分で調べてやったこと
ループを回すみたいなので、for文を追加したが1つのファイルしか表示できなかった。

Comments

[yambejp]

HTMLをHTMLとして記載ください
（よくわらないですがThymeleaf とかテンプレートエンジンつかってます？）

Answer 1

multipleなtype=fileからファイル名を取得するなら
fileプロパティの各データのnameを拾います

$(function(){
  $(document).on('change','#docs',function(){
    console.log([...$(this).prop('files')].map(x=>x.name));
  });
});

Comments

[rwatanabe]

こちらのお伝え不足ですみません。
コンソール上ではなく、html上で表示したいです。

[yambejp]

＞ html上で表示したいです。

どこにどうやって表示するのですか？
（補足にも書きましたがテンプレも問題がブレるのでやめてほしいんですけど）

[rwatanabe]

何度もすみません。input入力項目の上あたりに表示予定です。

[yambejp]

要求定義がアバウトすぎ・・・
（どうせこちらが書いても「そうじゃない」っていうんでしょ？）

$(function(){
$(document).on('change','#docs',function(){
var self=$(this);
[...$(this).prop('files')].forEach(x=>{
self.before(x.name);
});
});
});

[rwatanabe]

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