如何从选定的列表中删除图像使用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为只读。