javascript - 带有预览和删除，Jquery和Javascript的多图像上传

Question

我在这里有问题。我使用此代码可以选择和预览多个图像，但是我需要删除所选的图像。例如，我选择5张图像进行预览，但我有一个预览，但是我不喜欢其中之一，所以我想删除所选的图片。单击此处删除图像后，在这里我刚刚重置。使用旧代码(在注释中)，我只是隐藏了图像而未删除。我已尝试在此处找到解决方案，但无法正常工作。

 $(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();
              $('#files').val("");
          });

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

      

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

input[type="file"] {
    display: block;
}

.imageThumb {
    max-height: 75px;
    border: 2px solid;
    padding: 1px;
    cursor: pointer;
}

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="field" align="left">
    <h3>Upload your images</h3>
    <input type="file" id="files" name="files[]" multiple />
</div>

Answer 1

首先，为添加一个处理程序，除去$("#files").on("change"之外的按钮，因此处理程序的逻辑只会运行一次。在新的处理程序中，您必须找到要删除的图片的索引，然后使用过滤的文件创建一个DataTransfer。最后，用DT的文件覆盖输入的文件。

$(document).on('click', '.remove', function(){
            var pips = $('.pip').toArray();
            var $selectedPip = $(this).parent('.pip');
            var index = pips.indexOf($selectedPip[0]);

            var dt = new DataTransfer();
            var files = $("#files")[0].files;

            for (var fileIdx = 0; fileIdx < files.length; fileIdx++) {
                if (fileIdx !== index) {
                dt.items.add(files[fileIdx]);
              }
            }

            $("#files")[0].files = dt.files;

            $selectedPip.remove();
          });