0

I have a module that uploading image files to the server. Now I am trying to add preview and delete function to that before uploading to the server. When I press Remove, it removes from previews, but the image files still stay in the list and will be uploaded to the server when I press the Upload button. How to remove that files from the list too?

This is html part

<form action="<?php echo $_SERVER['PHP_SELF'] ?>"  method="post" 
  enctype="multipart/form-data">
<input type="file" id="file" name="file[]" multiple />
<p><div id="image-holder"></div></p>
<input type="submit" name="upload" value="Click to upload file">
</form>

here is jquery part

var abc = 0; 
$(document).ready(function() {  
if (window.File && window.FileList && window.FileReader) {
$("#file").on("change", function(e) {
  var files = e.target.files,  
  filesLength = files.length;
  var image_holder = $("#image-holder");
  abc += 1; 
  var z = abc - 1;

  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\" id='abcd" + abc + "'>" +
        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" alt=\"" + file.name + "\" +title=\"" + file.name + "\"/>" +
        "<br/><span class=\"remove\">Remove</span>" +
        "</span>").appendTo(image_holder);
       $(".remove").click(function(){
        $(this).parent(".pip").remove();
                 });             
    });
    fileReader.readAsDataURL(f);
  }
});
} 
});

I think It's sort of same problem if I add another file, it will only upload the last file only not including previously selected files.

CleanQuery
  • 25
  • 4
  • Possible duplicate of [How can I clear an HTML file input with JavaScript?](https://stackoverflow.com/questions/1703228/how-can-i-clear-an-html-file-input-with-javascript) – Tyler Roper May 31 '18 at 22:10
  • I am not asking to delete all files from the http files queue. I just want to remove one or two out of many files OR add more files to the initially selected http files queue. – CleanQuery May 31 '18 at 22:58
  • You can't do that. https://stackoverflow.com/questions/37948087/how-do-i-delete-an-image-from-a-file-input-by-clicking-an-x-on-an-image-previe – Tyler Roper May 31 '18 at 23:06

0 Answers0