Как я могу удалить изображение из предварительного просмотра, а также тег файла Jquery

Question

Я хочу удалить определенное изображение из панели предварительного просмотра, а также тег файла, когда выбрано несколько изображений.

Я добавлю HTML разделов, чтобы показать предварительный просмотр выбранных изображений.

1. Я выбираю несколько изображений (2, 3, 4 изображения)

Когда пользователь удаляет выбранные изображения с помощью " «Удалить» на панели предварительного просмотра, я пытаюсь удалить предварительный просмотр и его выбор из тега файла.

Пример: Уже 2 файла выбраны и удалены один файл, но выбор тега файла показывает еще 2 файла.

Я сделал этот код для добавления предварительного просмотра изображения и предварительного просмотра удаления .

      <div class="form-group">
           <lable>Select Multiple Image</lable>
           <input type="file" name="image[0][]" class="form-control filesimage0" multiple onchange="selectpreview(0,event)">
      </div>
  </div>

function selectpreview(id,e)
{
    var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove"+id+"\" id=\"image_" + id + "\">Remove</span>" +
            "</span>").insertAfter("#showimage"+id);

            $(".remove"+id).click(function(e){
             $(this).parent(".pip").remove();

          });

        });
        fileReader.readAsDataURL(f);
      }
}

Answer 1

Вы можете отсоединить индекс массива files и переставить массив. Допустим, у вас есть 4 файла [1, 2, 3, 4] с их индексами как id значением элемента предварительного просмотра, так что при нажатии кнопки remove вы можете отобразить id с соответствующим индексом в files Массив и склейте массив соответственно.

const files = e.target.files; // 4 files
files.splice(YOUR_ID_VALUE, 1); // you want to remove 3rd file then YOUR_ID_VALUE is 2