如何從 html 表中的動態生成的輸入文件控件中刪除一個選定文件的文件

Question

在此處輸入圖像描述我有一個 html 表，我在其中動態添加行，我在該表中有 3 列第一列是下拉列表，第二列是動態生成的輸入文件按鈕，第三列是刪除行。 我為輸入文件控件設置了“多個”類型以選擇多個文件以及“刪除”超鏈接以刪除最終用戶想要的特定文件，我可以從列表中刪除文件但實際上文件並未從輸入文件控件中刪除，即使從列表中刪除特定文件，我也可以看到文件數沒有減少。 我還附上了一個屏幕截圖，我可以刪除文件列表，但文件沒有從輸入文件控制中刪除，但文件沒有從輸入文件控制中刪除

Answer 1

單擊刪除時，您是否嘗試過類似document.querySelector('input[type="file"]').value = null ？

Answer 2

不要使用內置輸入，而是使用帶有隱藏輸入的 label，您還需要手動處理來自更改事件的文件，而不是在表單上使用序列化，您將創建一個new FormData()和 append 文件到它與任何其他數據。

 var Files = []; $(document).ready(()=>{ $('input#files').on('change', (e)=>{ let files = e.target.files; for(let i = 0; i < files.length; i++){ let file = files[i]; let div = document.createElement('div'); div.id = Files.length; $(div).append(`${file.name} <span class="delete-file" data-id="${Files.length}">X</span>`); $('div.files-container').append(div); Files.push(file); updateLabel(); } }); $(document).on('click', 'span.delete-file', function(e){ let id = $(this).data('id'); $(this).parent().remove(); Files.splice(id, 1); updateLabel(); }); }); function updateLabel() { let text = 'Select Files'; if(Files.length > 1) text = `${Files.length} Files`; else if(Files.length > 0) text = `${Files.length} File`; $('#files-count').html(text); }

 label.custom-input{ display: inline-block; border: 1px solid black; padding: 5px; border-radius: 5px; cursor: pointer; min-width: 150px; } label.custom-input input{ display: none; }.files-container{ display: flex; flex-direction: column; padding: 5px; }.files-container div{ padding: 5px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; border-bottom: 1px solid; } span.delete-file{ padding: 5px; color: white; background-color: red; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="files" class="custom-input"> <input id="files" type="file" multiple> <span id="files-count">Select Files</span> </label> <div class="files-container"> </div>