Question

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

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

Html代码 - ＆gt;

<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

您的代码中有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>

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

1 个答案: