如何在预览图像上添加复选框答案

【问题标题】：How to add checkbox over preview image如何在预览图像上添加复选框
【发布时间】：2020-12-04 06:37:23
【问题描述】：

我在上传之前开发了预览多张图片。但是现在如果我点击其中一张图片，它应该会在图片上显示一个绿色的勾号。

但是当我尝试这样做时，刻度线显示在 div 上而不是图像上。有人可以帮助我，因为我是 Rails 新手。

这是我的 html 代码。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type="file" multiple id="gallery-photo-add"><br>
   <label> <div class="gallery">

      <input type="checkbox">
      <span class="caption">
      </span>
    
  </div>
</label>

这是js

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

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

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

这是css

.caption {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0 10px;

  pointer-events: none;
}


.gallery img {
  display: block;

}

.gallery input {
  display: none;
}
.gallery input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.gallery input:checked + .caption::after {
  content: '✔';    
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%,-50%);
  color: green;
  font-size: 36px;
  line-height: 27px;
  text-align: center;
 }

https://jsfiddle.net/uj8v2kd5/21/

我正在附上小提琴。当我点击保存按钮选择图像后，它应该保存在数据库中

【问题讨论】：

您很快就会遇到另一个更大的问题，那就是从multiple 文件输入中删除项目。这里的任何答案都只是暂时的……某事。
是的，这有点复杂

标签： javascript jquery css ruby-on-rails file-upload

【解决方案1】：

更改 Z-Index 可以解决您的问题，如果我理解正确，您的刻度将不会显示（图片覆盖了它）。不妨试试这样：

.caption {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0 10px;

  pointer-events: none;
}


.gallery img {
  display: block;
  z-index: 1;  /* Make sure its lower then the tick one */

}

.gallery input {
  display: none;
}
.gallery input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.gallery input:checked + .caption::after {
  content: '✔';    
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%,-50%);
  color: green;
  font-size: 36px;
  line-height: 27px;
  text-align: center;
  z-index: 500;  /* Just some high value */
 }

´´´

【讨论】：