从预览中选择的文件中删除文件

Question

我有一个网站，用户可以在其中上传多个文件（仅限图片）。我添加了一个功能，可以在预览中看到上传的文件。我从另一个关于 stackoverflow 的帖子中获得了帮助。

function previewImages() {

    var $preview = $('#preview').empty();
    if (this.files) $.each(this.files, readAndPreview);
  
    function readAndPreview(i, file) {
      
      if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
        return alert(file.name +" is not an image");
      }
      
      var reader = new FileReader();
  
      $(reader).on("load", function() {
        $preview.append($("<img/>", {src:this.result, height:100}));
      });
  
      reader.readAsDataURL(file);
      
    }
  
  }
  
  $('#file-input').on("change", previewImages);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
        <label class="btn btn-outline-dark btn-sm">
            <i class="mdi mdi-upload"></i>
            <span class="position-relative" style="top: -2px;">Upload image</span>
            <input type="file" style="display: none;" id="file-input" multiple>
        </label>
        <div id="preview" class="my-3"></div>
    </div>

现在我想为每个上传的图片创建一个功能，应该有一个删除按钮（图片下方）。如果用户单击删除，则相关图像将被删除并且不再显示。 我目前不知道该怎么做。有人知道我的问题的答案吗？

我使用了 libaray Dropzone，但它有问题，所以我决定不再使用它。

Answer 1

只需将您的 img 标记与父部分包装在一起，然后添加一个元素以删除该图像。然后，为该元素添加一个点击侦听器并像这样轻松删除相应的图像：

function previewImages() {

    var $preview = $('#preview').empty();
    if (this.files) $.each(this.files, readAndPreview);

    function readAndPreview(i, file) {

        if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
            return alert(file.name + " is not an image");
        }

        var reader = new FileReader();

        $(reader).on("load", function (e) {
            $preview.append(`<span class="parent-span">
                <img class="imageThumb" src="`+ e.target.result + `" title="` + file.name + `"/>
                <br/><span class="remove">Remove image</span>
                </span>`);
        });

        reader.readAsDataURL(file);

        $(document).on("click", ".remove", function () {
            $(this).parent(".parent-span").remove();
        });

    }

}

$('#file-input').on("change", previewImages);

.imageThumb {
    height: 100px;
    width: 100px;
    cursor: pointer;
}

.parent-span {
    display: inline-block;
    margin: 10px 10px 0 0;
}

.remove {
    background: #444;
    border: 1px solid black;
    border: 1px solid black;
    color: white;
    text-align: center;
    cursor: pointer;
}

.remove:hover {
    background: white;
    color: black;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <label class="btn btn-outline-dark btn-sm">
        <i class="mdi mdi-upload"></i>
        <span class="position-relative" style="top: -2px;">Upload image</span>
        <input type="file" style="display: none;" id="file-input" multiple>
    </label>
    <div id="preview" class="my-3"></div>
</div>