去除多輸入文件上傳圖片預覽

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

您需要清除輸入的值

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

Answer 2

您的刪除圖標不可見。 為了顯示目的，我已將圖標更改為跨度，然后單擊“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>