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

Question

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

$(function() {
  var imagesPreview = function(input, placeToInsertImagePreview) {
    if (input.files) {
      var filesAmount = input.files.length;

      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();

        reader.onload = function(event) {
          var imgElement = $($.parseHTML('<img>')).attr('src', event.target.result).attr('class', 'prevImage').appendTo(placeToInsertImagePreview);
          imgElement.wrap('<div class="img-preview"></div>');
          imgElement.parent().append('<i class="remove-image-preview fe fe-x-circle"></i>');
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };

  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
  });
  
  $(document).on('click', '.remove-image-preview', function() {
    $(this).parent('.img-preview').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
  <input type="file" name="fields[postImage][]" id="gallery-photo-add" multiple>

  <div class="gallery row mt-3"></div>
  <!-- this preview image -->

Answer 1

Ваш значок удаления не виден. У меня есть значок для изменения диапазона для отображения и нажмите «X», чтобы удалить предварительный просмотр отдельного изображения.

var imagesPreview = function(input, placeToInsertImagePreview) {
    if (input.files) {
      var filesAmount = input.files.length;

      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();

        reader.onload = function(event) {
          var imgElement = $($.parseHTML('<img>')).attr('src', event.target.result).attr('class', 'prevImage').appendTo(placeToInsertImagePreview);
          imgElement.wrap('<div class="img-preview"></div>');
          imgElement.parent().append('<span class="remove-image-preview">X</span>');
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };

  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
  });

  $(document).on('click', '.remove-image-preview', function() {
    $(this).parent('.img-preview').remove();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
  <input type="file" name="fields[postImage][]" id="gallery-photo-add" multiple>

  <div class="gallery row mt-3"></div>

Answer 2

Вам необходимо очистить значение ввода

$( "form" ).on('click', '.remove-image-preview', function(){
      $(this).parent('.img-preview').remove();
      $('#gallery-photo-add').val('');
});