input选择图片上传可删除

如果您想实现上传图片并且可以删除，可以通过以下步骤来实现：

1. 在前端页面，添加一个文件上传的input标签，例如：

<input type="file" id="image-uploader">

2. 在上传图片之后，将图片的地址保存到一个数组中，同时在页面上显示图片。例如：

let images = [];

const handleImageUpload = (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = () => {
    const image = reader.result;
    images.push(image);
    displayImages(images);
  }

  reader.readAsDataURL(file);
}

const displayImages = (images) => {
  const container = document.getElementById('image-container');
  container.innerHTML = '';

  images.forEach((image, index) => {
    const img = document.createElement('img');
    img.src = image;
    img.classList.add('uploaded-image');
    
    const deleteBtn = document.createElement('button');
    deleteBtn.innerText = 'Delete';
    deleteBtn.addEventListener('click', () => deleteImage(index));

    const imageWrapper = document.createElement('div');
    imageWrapper.classList.add('uploaded-image-wrapper');
    imageWrapper.appendChild(img);
    imageWrapper.appendChild(deleteBtn);

    container.appendChild(imageWrapper);
  });
}

const deleteImage = (index) => {
  images.splice(index, 1);
  displayImages(images);
}

document.getElementById('image-uploader').addEventListener('change', handleImageUpload);

3. 在页面上添加一个图片容器，用于显示上传的图片。例如：

<div id="image-container"></div>

4. 在每张图片旁边添加一个"删除"按钮，点击按钮可以删除对应的图片。例如：

const deleteBtn = document.createElement('button');
deleteBtn.innerText = 'Delete';
deleteBtn.addEventListener('click', () => deleteImage(index));

5. 当用户提交表单时，将上传的图片地址提交到后端进行保存。