带预览和删除、Jquery 和 Javascript 的多张图片上传

Posted 2023-03-06

【中文标题】带预览和删除、Jquery 和 Javascript 的多张图片上传

【英文标题】：Multiple Image upload with previw and delete , Jquery and Javascript

【发布时间】：2020-09-27 07:24:24

【问题描述】：

我这里有问题。我使用此代码多次选择和预览图像，但我需要删除选定的图像。例如，我选择了 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>

【问题讨论】：

希望对您有所帮助：***.com/questions/16943605/…

@GhostPengy 我已经尝试过这个解决方案...

@mplungjan 这并不粗鲁，因为在我把问题放在这里之前，我已经检查了类似的问题。我理解我放在这里的这段代码，它也是 *** 的一部分。因此，如果您可以使用此代码提供帮助，或者您拥有此帮助的所有完整代码并发送。我不想粗鲁，只是因为在我提出问题之前我检查了类似的问题。很多人都有同样的问题，所以如果你有解决方案的帮助，因为我每天都在尝试和学习，我想理解和学习我的代码

@mplungjan 为什么你删除了我的答案？

@chandukomati 在这里我有多个选择和预览图像。当我单击“删除图像”（图片下方）时，我希望从预览中删除该图片。因此，使用此代码，您可以预览多张图片并重置所有图片。但你不能只删除其中一个

【参考方案1】：

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

$(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();
          );