本文讲解如何在 NFT 铸造页面中实现“清除已选图片”功能——通过重置 的 src 属性而非删除整个元素，确保用户可反复上传新文件。
本文讲解如何在 nft 铸造页面中实现“清除已选图片”功能——通过重置 `` 的 `src` 属性而非删除整个元素，确保用户可反复上传新文件。
在构建 NFT 市场前端时，图片上传与重置是核心交互之一。你遇到的问题非常典型：点击关闭按钮后，图片确实“消失了”，但后续无法再上传新图——根本原因在于 nftImage.remove() 彻底移除了 <img> 元素本身，导致后续 nftImage.src = ... 赋值失效（因为 nftImage 已不复存在）。
✅ 正确做法是保留 DOM 结构，仅清空图片源：
closeButton.addEventListener('click', function () {
nftImage.src = ""; // ✅ 重置 src，而非移除元素
inputFile.value = ""; // ✅ 同步清空 file input 的值（避免重复触发 onchange）
});
同时注意两个关键细节：
<input type="file">的value必须手动清空
浏览器出于安全限制，即使<img>清空了，inputFile.files仍可能保留旧引用；且若不重置inputFile.value，再次选择同一文件时onchange事件不会触发（因值未变化）。因此务必添加inputFile.value = ""。-
accept属性语法需修正
原代码中accept="img/jpeg, img/png, img/jpg"是错误的 MIME 类型写法，应改为：<input type="file" accept="image/jpeg, image/png, image/jpg" id="input-file">
（注意：
image/前缀不可省略，jpg应写作jpeg或补充image/jpg；更推荐使用accept="image/*"简化支持）
完整修复后的脚本如下：
let closeButton = document.querySelector('.close');
let nftImage = document.querySelector('#Nft-Image');
let inputFile = document.querySelector('#input-file');
// 图片上传处理
inputFile.onchange = function () {
if (inputFile.files.length > 0) {
nftImage.src = URL.createObjectURL(inputFile.files[0]);
}
};
// 清除图片（保留 img 元素）
closeButton.addEventListener('click', function () {
nftImage.src = "";
inputFile.value = ""; // 关键：重置 input 值
});
? 额外建议：
- 可为
<img>添加alt属性（如alt="NFT preview"）提升可访问性； - 在
nftImage.src = ""后，可配合 CSS 显示占位提示（如.NftUpload[src=""]::before { content: "No image selected"; }）； - 生产环境建议将
<style></style>和<script></script>拆分至独立文件，并启用模块化加载。
遵循以上方案，即可实现平滑的“上传 → 预览 → 清除 → 重新上传”闭环体验，无需重建 DOM，逻辑清晰且兼容性强。
