如何使此脚本仅删除一个图像

How do I make this script remove only one image?

本文关键字：一个 图像 何使此 脚本 删除      更新时间：2023-09-26

此脚本允许在上传之前预览/删除图像（通过单击图像）。我唯一的问题是当我单击图像将其删除时，它会删除两个图像。

形式：

<form action="" method="POST" enctype="multipart/form-data">   
<input type="file" style="display:none" id="upload-image" multiple="multiple" name="upload[]"></input>
<div id="upload" class="drop-area">
   Upload File
</div>
<div id="thumbnail"></div>  
<input type="submit" value="Submit" class="button" name="lesubmit"/>
</form>

Js：

jQuery(function($){
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change",function(e){
  var files = this.files
  showThumbnail(files)
},false)
fileDiv.addEventListener("click",function(e){
  $(fileInput).show().focus().click().hide();
  e.preventDefault();
},false)
fileDiv.addEventListener("dragenter",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);
fileDiv.addEventListener("dragover",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);
fileDiv.addEventListener("drop",function(e){
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  var files = dt.files;
  showThumbnail(files)
},false);
function showThumbnail(files){
  for(var i=0;i<files.length;i++){
    var file = files[i]
    var imageType = /image.*/
    if(!file.type.match(imageType)){
      console.log("Not an Image");
      continue;
    }
    var image = document.createElement("img");
    // image.classList.add("")
    var thumbnail = document.getElementById("thumbnail");
    image.file = file;
    thumbnail.appendChild(image)
    var reader = new FileReader()
    reader.onload = (function(aImg){
      return function(e){
        aImg.src = e.target.result;
      };
    }(image))
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    image.onload= function(){
      ctx.drawImage(image,100,100)
    }
  }
}
$('#thumbnail').on("click", function () {
    $('#thumbnail').fadeOut(1000, function() {
        $(this).removeProp('src');
        $('img').replaceWith(selected_photo = $('img').clone(true));
    });
});
          });

所有的建议都值得赞赏！

根据我的评论，您将需要执行以下操作：

$("#thumbnail").on("click", "img", function () {
  var image= $(this);
  image.fadeOut(1000, function () { 
    image.removeProp('src').replaceWith(selected_photo = image.clone(true);
  });
});

这实际上会淡出图像，从图像中删除源属性，并将其替换为克隆。我仍然不明白你正在进行的 replaceWith（），所以你可能不得不稍微调整一下，但其余的应该对你有帮助。

相关文章：