为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

胡子哥哥 2023-01-06 10:38:20

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


但是当我尝试这样做时,刻度线显示在 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/


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


查看完整描述

1 回答

?
守着星空守着你

TA贡献1554条经验 获得超8个赞

更改 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 */

 }


´´´


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 14 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信