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 只读，因此您无法删除任何文件。

如何从所选列表中删除图像使用javascript？

1 个答案: