上传具有预览功能的多个图像，单击后删除它们

Question

这里我试图通过预览上传多个图像，但现在的问题是如何在单击x按钮后从预览中删除图像，以及如何从它的数组let item_images = [];中删除该图像？我很感谢你的帮助。

​

function previewImage(e, selectedFiles, imagesArray) {
      const elemContainer = document.createElement('div');
      elemContainer.setAttribute('class', 'item-images');
      for (let i = 0; i < selectedFiles.length; i++) {
        imagesArray.push(selectedFiles[i]);
        const elem = document.createElement('img');
        elem.setAttribute('src', URL.createObjectURL(e.target.files[i]));
        elem.setAttribute('class', 'item-photo__preview')
        const removeButton = document.createElement('button');
        removeButton.setAttribute('type', 'button');
        removeButton.innerHTML = '<span>&times;</span>'
        elemContainer.appendChild(elem);
        elemContainer.appendChild(removeButton);
    }
    return elemContainer;
}
   let item_images = [];
     document.querySelector('#photo-upload').addEventListener('change', (e) => {
         let selectedFiles = e.target.files;
         const photoPreviewContainer = document.querySelector('#photo-upload__preview');
         const elemContainer = previewImage(e, selectedFiles, item_images);
         photoPreviewContainer.appendChild(elemContainer);
   });

.item-photo__preview {
   width:150px;
   height: 150px;
}

<div class="item-upload">
     <input id="photo-upload" type="file" multiple/>
     <div id="photo-upload__preview" class="upload-preview"></div>
</div>

​

Answer 1

代表：

​

function previewImage(e, selectedFiles, imagesArray) {
  const elemContainer = document.createElement('div');
  elemContainer.setAttribute('class', 'item-images');
  for (let i = 0; i < selectedFiles.length; i++) {
    imagesArray.push(selectedFiles[i]);
    const imageContainer = document.createElement('div');
    const elem = document.createElement('img');
    elem.setAttribute('src', URL.createObjectURL(selectedFiles[i]));
    elem.setAttribute('class', 'item-photo__preview')
    const removeButton = document.createElement('button');
    removeButton.setAttribute('type', 'button');
    removeButton.classList.add('delete');
    removeButton.dataset.filename = selectedFiles[i].name,
    removeButton.innerHTML = '<span>&times;</span>'
    imageContainer.appendChild(elem);
    imageContainer.appendChild(removeButton);
    elemContainer.appendChild(imageContainer);
  }
  return elemContainer;
}
let item_images = [];
document.getElementById('photo-upload').addEventListener('change', (e) => {
  let selectedFiles = e.target.files;
  const photoPreviewContainer = document.querySelector('#photo-upload__preview');
  const elemContainer = previewImage(e, selectedFiles, item_images);
  photoPreviewContainer.appendChild(elemContainer);
});

document.getElementById('photo-upload__preview').addEventListener('click', (e) => {
  const tgt = e.target.closest('button');
  if (tgt.classList.contains('delete')) {
    tgt.closest('div').remove();
    const fileName = tgt.dataset.filename
    item_images = item_images.filter(img => img.name != fileName)
  }
})

.item-photo__preview {
  width: 150px;
  height: 150px;
}

<div class="item-upload">
  <input id="photo-upload" type="file" multiple/>
  <div id="photo-upload__preview" class="upload-preview"></div>
</div>

​