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

Question

我有文件输入，选择图像文件后会显示图像预览，这是 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 函数只生成图像预览

Answer 1

你的代码有两个错误：

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>