Как удалить один файл из выбранных файлов из динамически сгенерированного элемента управления входным файлом в HTML-таблице

Question

введите описание изображения здесь У меня есть HTML-таблица, в которую я добавляю строку динамически, у меня есть 3 столбца в этой таблице. Первый - раскрывающийся список, 2-й - динамически генерируемая кнопка входного файла и3-й столбец для удаления строки. Я установил «множественный» тип для управления входным файлом, чтобы выбрать несколько файлов вместе с гиперссылкой «Удалить», чтобы удалить определенный файл, если конечный пользователь хочет, я могу удалить файл из списка, но на самом деле файл не удаляется из элемента управления входным файлом,Я вижу, что количество файлов не уменьшается даже после удаления указанного файла из списка. Я также приложил снимок экрана, я могу удалить список файлов, но файл не удаляется из элемента управления входным файлом, но файл не удаляется из элемента управления входным файлом

Answer 1

Вместо использования встроенного ввода используйте метку со скрытым вводом внутри, вам также нужно будет обрабатывать файлы из события изменения вручную, вместо использования сериализации в форме, вы создадите new FormData() и добавите файлы кэто наряду с любыми другими данными.

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>

Answer 2

Вы пробовали что-то вроде document.querySelector('input[type="file"]').value = null, когда нажимали удалить?