如何在 javascript 中删除图像数组中的图像，同时在浏览器屏幕上保持当前图像列表？

Posted 2023-05-09

【中文标题】如何在 javascript 中删除图像数组中的图像，同时在浏览器屏幕上保持当前图像列表？

【英文标题】：How to delete an image in array of images in javascript while maintaining current image list on browser screen?

【发布时间】：2021-08-17 17:40:53

【问题描述】：

我有一组图片上传到浏览器屏幕，如下所示：

...

<input type="file" id="image" accept="image/*" name="image[]" multiple /><br/>
<div id="images"></div>
    
$('#image').change(function()
    for (i = 0; i < $(this)[0].files.length; i++) 
      imageCount = imageCount + 1;
        $("#images").append('<div style="width:100px;"><img src="'+window.URL.createObjectURL(this.files[i])+'" id="images"  />'+'<button type="button" onclick="uploadImage('+imageCount+');">Upload </button>&nbsp;<button type="button" onclick="removeImage('+imageCount +');">X</button></div>   nbsp;');

    
);

function removeImage(position) 
     images = $('#images');
     alert("Position: "+position);

...

如何删除图像数组中特定位置的图像？

【参考方案1】：

你的代码与arrays无关。

相反，您尝试在 DOM 中添加/删除元素。您可以只使用event handler，而不是尝试将值动态分配给onclick。

还需要注意的是，在您的代码中，您最终会得到多个具有id="image" 的元素，这是无效的。 IDs need to be unique. 改为使用 classes。另见template literals 和.on()

<input type="file" id="add_images" accept="image/*" multiple />
<div id="images"></div>

$('#add_images').on('change', function()
  $.each(this.files, function(file) 
    $('#images').append(`
      <div style="width:100px;">
        <img class="image" src="$window.URL.createObjectURL(file)">
        <button class="upload_image">Upload</button>
        <button class="remove_image">X</button>
      </div>`);
  );
);

$('#images') //this replaces the onclick="" method
  .on('click', 'button.remove_image', function() 
    this.parentElement.remove();
  );
  .on('click', 'button.upload_image', function() 
    //code for uploading image
  );

不能说我曾经使用过URL.createObjectURL()，因此您可能需要重新调整那部分代码。

【讨论】：

尽管 $(this).parent().remove(); 你的代码大部分都在工作。对于删除我试图删除的元素会更好。我的问题是，如何访问临时上传到浏览器的图像？

哎呀，你是对的，它应该是父删除，我会解决这个问题。您可以按照您尝试的方式进行操作，给每个图像一个唯一的标识符，然后使用它访问它。但这可能会遇到unique 部分的挑战。或者我建议的方式，它使用父元素和 DOM 遍历来使按钮相对于图像，不需要标识符。搜索DOM traversal。除了上传/删除之外，您还想做更多的事情吗？

我现在只是在尝试上传和删除。