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

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

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

---

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

您的代码中有两个错误：

1-您没有正确关闭

按钮

，因此正确的标记应该是：

.img-wrap {
    position: relative;

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

}

只有在选择图像并从按钮中删除类

hide

时，才能显示该按钮。您的脚本将变成：

var loadFile=函数（事件）{
var output=document.getElementById（'output'）；
output.src=URL.createObjectURL（event.target.files[0]）；
$（“#清除”）.removeClass（“隐藏”）；
};

快速观察。。。x有一个锚结束标记。我面临的问题是预览是动态生成的，所以删除按钮也应该动态生成。Y是我使用jquery的，所以我应该在img wrap div中生成buuton？是的，您可以在触发事件时添加一个按钮。或者，您也可以选择隐藏按钮，并在加载图像时显示$（“.img wrap”）。附加（r）；但它又添加了一个按钮，阿加尼改变了我的答案。我的想法是只在img加载时显示botton，并在加载之前使用类“hide”保持隐藏。。。

<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>

.img-wrap {
    position: relative;

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

}

<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"> 

.img-wrap {
position: relative;
float:left;
}

 .img-wrap #clear {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;

}

 .hide{
  display:none;
 }

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