【JQuery】動的に追加したファイル添付欄にアップロードしたデータのファイル名を取得&出力したいです。

実現したいこと

  1. JQueryで、動的にファイル添付欄を増やした後に、追加した<input type="file">にアップしたデータのファイル名を取得したいです。
  2. <input type="file">は、cssでカスタマイズしていますので、任意のタグ内のテキストをアップしたファイル名に書き換わるようにしたいです。
  3. <span>選択されていません</span>にファイル名を出力したいです。

前提

  • JQueryで、動的にファイル添付欄を増やすことができるのですが、追加した<input type="file">にアップしたデータのファイル名を取得できません。
  • .cloneを使って入力欄を追加すると、入力値を引き継いだ状態で追加されるのでそれは避けたいです。

該当のソースコード

html

1 <div class="container"> 2 <div id="input_fields">3 <div class="input_field">4 <label>5 <input type="file" name="field_name[]" id="file_1">6 <span>選択されていません</span>7 </label>8 <button class="remove_field">削除</button>9 </div>10 </div>11 <button id="add_field">追加</button>12 </div>

css

1 .container{2 max-width: 485px;3 }4 .input_field{5 display: flex;6 align-items: center;7 justify-content: space-between;8 flex-wrap: wrap;9 margin-bottom: 10px;10 gap: 10px;11 font-size: 15px;12 }13 .input_field label{14 position: relative;15 padding: .5em 1em;16 width: 400px;17 background: #f2f2f2;18 }19 .input_field label input[type="file"]{20 position: absolute;21 left: 0;22 top: 0;23 width: 100%;24 height: 100%;25 opacity: 0;26 }

jquery

1$(document).ready(function () { 2 var max_fields = 10; 3 var wrapper = $("#input_fields"); 4 var add_button = $("#add_field"); 5 6 var x = 1; 7 $(add_button).click(function(e) { 8 e.preventDefault(); 9 if (x < max_fields) { 10 x++; 11 var html = '<div class="input_field"><label><input type="file" name="" id="file_' + (+1) + '"><span>選択されていません</span></label><button class="remove_field">削除</button></div>'; 12 $(wrapper).append(html); 13 } 14 }); 15 $(wrapper).on("click", ".remove_field", function(e) { 16 e.preventDefault(); 17 $(this).parent('div').remove(); 18 x--; 19 }); 20}); 21 22$("#file_" + (+1)).change(function() { 23 var fileName = $(this).prop('files')[0].name; 24});

見た目はこのような感じになります。

掲載したcssでは、このような見た目になります。

イメージ説明

補足

初歩的な質問で大変恐縮ですが、どうぞお力をお貸しください。

実装の考え方としては、

動作① 入力欄追加

追加ボタンをクリック

入力フィールドを追加

動作② アップロード

追加したフィールドへのアップロードを検知?

ファイル名を取得

ファイル名を出力

なのでしょうか…?
JQueryでどのようなメソッドがあるかあまりよく理解しておりません。

よろしくお願いいたします。

コメントを投稿

0 コメント