Question

在一种表单中，我想让用户一个接一个地上传多张图片，还可以让他们通过单击x按钮来删除每张图片：

这是我的javascript / jQuery，它将Base64图像预览添加到DOM：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      let image = new Image();
      image.src = `${e.target.result}`;
      image.className = "img-thumbnail add-image-thumb";          
      let closeBtn = `<button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span> </button>`;
      $('#images-to-upload').append(image);
      $('#images-to-upload').append(closeBtn);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function () {
  readURL(this);
});

和html部分：

 <div id="images-to-upload" class="mb-3"> </div>
 <div class="input-group mb-3">          
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="imgInp" >
      <label class="custom-file-label" for="image-input"></label>
    </div>
    
  </div>
  <small class="form-text text-muted">Upload one or more images</small>

<br>

CSS：

.add-image-thumb{
  max-height: 64px;
  margin: 10px;
  padding: 5px;
}

这对于一幅图像效果很好，但是对于多幅图像，所有x都转到页面的右侧。

问题是如何将x按钮放在每个图像的左上角。我无法从Base64图像中构造一个div，否则我可以通过CSS进行管理。

Answer 1

我无法从Base64图像中构造一个div，否则我可以通过CSS进行管理以实现这一点。

在图片周围包裹一个div

  let wrapper = $('<div class="image-wrapper" />');
  $('#images-to-upload').append(wrapper) 
  $(wrapper).append(image);
  $(wrapper).append(closeBtn);

使用下面的CSS

.image-wrapper {
   display: inline-block;
   position: relative;
}
.image-wrapper button {
   position: absolute;
   top: 0;
   right: 0;
 }

如何在base64图像预览中添加关闭按钮？

1 个答案: