Jquery多图像预览删除不起作用

Question

我有多个图像预览 js 代码：

$(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;
            $("<li class=\"pip\"><figure>" +
              "<img height='70px' width='70px' src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
              "<a href='#' class='remove'><img src='' alt=''></a>" +
              "</figure></li>").appendTo(".gallery");
            $(".remove").click(function(){
                alert('ok')
              $(this).parent(".pip").remove();
            });
          });
          
          fileReader.readAsDataURL(f);
        }
        console.log(files);
      });
    } 
  });

我要附加的 HTML 代码是：

<div class="uploaded-files">
     <ul class="gallery">

      </ul>
</div>

毕竟我得到了这个。但我的问题是，当我通过十字图标删除图像时，它并没有删除图像我不知道为什么会发生这种情况删除按钮不起作用可以请任何人帮助我与此相关?? 我也没有得到标题中的文件名

Answer 1

您需要 .parents()（复数）或最接近 .pip 父级

parent：这个方法类似于 .parents()，除了 .parent() 只在 DOM 树上向上移动一层。

将点击移到外部并委托

$(function() {
  $(".gallery").on("click",".remove",function(){
    $(this).closest(".pip").remove();
  });
  $(".files").on("change", function(e) { ... })
});

你可以删除

if (window.File && window.FileList && window.FileReader) {

因为它们从 IE10 开始就存在

最后检查一下

How to get the filename from the Javascript FileReader?

要从列表中删除，您需要创建一个数组

$(function() {
  let files;
  $(".gallery").on("click", ".remove", function() {
    const idx = $(this).closest("li").index(); // or set a data-attribute on the remove containing the IDX
    $(this).closest(".pip").remove();
    files.splice(idx,1)
    console.log(files.map(f => f.name))
  });

  $(".files").on("change", function(e) {
    files = [...e.target.files]; // create an array
    $(".gallery").empty()
    files.forEach(f => {
      const fileReader = new FileReader();
      fileReader.onload = (function(e) {
        let file = e.target;
        $(`<li class="pip"><figure>
          <img height='70px' width='70px' src="${file.result}" title="${file.name}"/>
          <a href='#' class='remove'><i class="fas fa-times"></i></a>
          </figure></li>`).appendTo(".gallery");
      });
      fileReader.readAsDataURL(f);
    })
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" class="files" multiple />

<ul class="gallery" style="list-style-type:none"></ul>

Answer 2

代码看起来不错，你这里好像少了一个分号：

alert('ok'); // <-- HERE
          $(this).parent(".pip").remove();