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

#javascript #php #jquery

Вопрос:

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

 $("#pimage").change(function() {
  $('#image-preview').html("");
  var total_file = document.getElementById("pimage").files.length;

  for (var i = 0; i < total_file; i  ) {
    $('#image-preview').append("<div class='col-md-4 fimgs'><img src='"   URL.createObjectURL(event.target.files[i])   "' class='img-responsive'><br><span class='removeimage'>X</span></div>");
  }

  $(".removeimage").click(function() {
    // alert('Hi');
    $(this).parent(".fimgs").remove();
  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="index.php" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <textarea class="form-control" id="post_feed" name="post_feed" rows="3" placeholder="What's on your mind?"></textarea>
  </div>
  <div class="row">
    <div class="col-md-8 col-lg-8 col-sm-12">
      <input type="submit" name="submit" value="Post" class="btn btn-dark">
    </div>
    <div class="col-md-2 col-lg-2 col-sm-12">
      <label for="pimage"><i class="fa fa-image"></i></label>
      <input type="file" multiple name="pimage[]" id="pimage" class="imc" style="display:none">
    </div>
    <div class="col-md-2 col-lg-2 col-sm-12">
      <label for="pvideo"><i class="fa fa-file-audio-o" aria-hidden="true"></i>
</label>
      <input type="file" id="pvideo" multiple name="pvideo[]" class="imc" style="display:none;"> </div>
  </div>
  <div class="image-preview row" id="image-preview"></div>
</form> 

Комментарии:

1. После вызова val(«) все файлы становятся пустыми. Он просто загружает пустой файл.