前提・実現したいこと
お世話になっております。
選択したファイルのファイル名とそのファイルを削除できる削除ボタン出力するように
実装しています。
2つのファイルを選択した場合
削除ボタンaを押すと○○.txtが削除され、削除ボタンbを押すと□□.jpgが削除される。
選択ボタン押すとエクスプローラーが開く。
ーーーーー以下、実行結果--------------
○○.txt [削除ボタンa]
□□.jpg [削除ボタンb]
入力項目 [選択ボタン]
発生している問題・エラーメッセージ
削除ボタンa、削除ボタンbともに押すと、表示されているファイル全て削除される。
該当のソースコード
html
1<tr class="tenpu_docs"> 2 <th class="v_top">添付資料</th> 3 <td> 4 <div class="file_row"> 5 <div id="FileName" class="file_wrapper"> 6 <input type="file" th:field="*{icon_file}" id="docs" th:path="*{icon_file}" multiple="multiple"/> 7 <p class="file_name_keeper"></p><label for="docs">選択</label> 8 </div> 9 </div> 10 <p style="color: #FF0000;" th:if="${#fields.hasErrors('*{icon_file}')}" th:errors="*{icon_file}"></p> 11 </td> 12</tr>
javascript
1//アップロードファイル選択 2$(document).on('change','#docs',function(){ 3 var file = $(this).prop('files'); 4 var len = file.length; 5 6 for (var i=0; i < len; i++) { 7 var fileName = file[i].name; 8 console.log(fileName); 9 var element = document.getElementById('FileName'); 10 //var filePath = fileData.presult; 11 12 //ファイル名を表示 13 if (i==0) { 14 $(this).closest('div').find('p.file_name_keeper').html(fileName).addClass('on_keep'); 15 16 } else { 17 var h = '<p class="file_name_keeper on_keep">' + fileName + '</p>'; 18 file_wrapper.innerHTML = element.insertAdjacentHTML('beforeend', h); 19 } 20 21 //削除ボタンを追加 22 $(this).closest('div').append('<span class="b_del remove"></span>'); 23 } 24 //選択ラベルを削除 25 $(this).closest('div').find('label').remove(); 26 //追加ボタンを削除 27 // $(this).closest('td').find('.b_add').remove(); 28 //アップロードフィールドのセットを追加 29 $(this).closest('td').append('<div class="file_row"><div class="file_wrapper"><input type="file" name="tenpu_file[]" id="docs'+dupNum+'"><p class="file_name_keeper"></p><label for="docs'+dupNum+'">選択</label></div><!--<span class="b_del"></span>--></div>') 30 dupNum++; 31}) 32//アップロードファイル削除 33$(document).on('click','tr.tenpu_docs .b_del', function () { 34 $(this).closest('div.file_wrapper').remove(); 35})
補足情報(FW/ツールのバージョンなど)
jQueryバージョン
jquery3.3.0.min.js
jquery-ui.js
jquery.ui.touch-punch.min.js
あなたの回答
tips
プレビュー