如何在图像右上角显示删除按钮

how to show delete button in right corner of Image

本文关键字：显示 删除 按钮 右上角 图像      更新时间：2023-09-26

我有文件输入，选择图像文件后会显示图像预览，这是jquery代码

<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

Html 代码>

<input type="file" name="image_file" id="cretor" accept="image/*" onchange="loadFile(event)">
<img id="output" width="80" height="80">

上面的代码在选择图像后立即生成图像预览，但我如何在图像右上角显示删除按钮并重置文件输入并删除该图像

这是我试图在图像右上角显示的删除按钮

<div class="img-wrap">
    <button id="clear" onclick="twz()">x</a>
    <img src="blob:https://www.example.com/c880bfa4-25d0-4e2b-91e4-d722b864cc79" id="output">
</div>

.CSS

.img-wrap {
    position: relative;
}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
}

现在如何生成按钮并将其放在右上角，因为 loadFile 函数仅生成图像预览

代码中有 2 个错误：

1-您没有正确关闭button因此正确的标记应该是：

<input type="file" name="image_file" id="cretor" accept="image/*"onchange="loadFile(event)">

<div class="img-wrap">
<button id="clear" class="hide" onclick="twz()">x</button>
<img id="output" width="80" height="80">

2-第二个是，在您的css中，您尝试选择一个名为close的类，但是标记具有id="clear"，因此您可以通过这种方式更改css，并且可以正常工作：

.img-wrap {
position: relative;
float:left;
}
 .img-wrap #clear {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
}
 .hide{
  display:none;
 }

仅当选择图像并从按钮中删除类hide时，才能显示该按钮。 您的脚本将变为：

<script>
 var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
$("#clear").removeClass("hide");
};
</script>
相关文章：