如何從選定的列表中刪除圖像使用JavaScript？

Question

我有一個用於上傳文件的html表單。我可以預覽圖像並從預覽本身刪除選項。但是，它不會從用於將圖像上載到服務器的圖像列表中刪除。請幫我從列表中刪除所選圖像

Javascript代碼：

$(document).ready(function() { 
    if (window.File && window.FileList && window.FileReader) { 
     $("#files").on("change", function(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\">Remove image</span>" + 
         "</span>").insertAfter("#files"); 

        $(".remove").click(function(){ 
         $(this).parent(".pip").remove(); 
        });   
       }); 

       fileReader.readAsDataURL(f); 
      } 
     }); 
    } else{ 
     alert("Your browser doesn't support to File API") 
    } 
}); 

Answer 1

更改刪除操作到這一點，這將刪除所有文件

$(".remove").click(function(){ 
    $(this).parent(".pip").remove() 
    $("#files").val('') // this is new 
}) 

，你不僅可以去除一個文件爲e.target.files爲只讀。