预览图片后隐藏元素问题求助（JavaScript新手）

先修复JavaScript逻辑错误 #

你当前代码里，外部的if (file != null)完全无效——file是onchange回调里的局部变量，外部无法访问这个值。必须把隐藏按钮的逻辑移到回调函数内部：

// 先获取所有需要操作的DOM元素
const imageInput = document.getElementById("imageInput");
const preview = document.getElementById("preview");
const displayPreview = document.getElementById("hide");

imageInput.onchange = (evt) => {
  const [file] = imageInput.files;
  if (file) {
    // 生成图片预览地址
    preview.src = URL.createObjectURL(file);
    // 显示预览图，同时隐藏添加按钮容器
    preview.style.display = "block";
    displayPreview.style.display = "none";
  } else {
    // 用户取消选择图片时，恢复初始状态
    preview.style.display = "none";
    displayPreview.style.display = "block";
    preview.src = "#";
  }
};

解决按钮压在预览图后方的布局问题 #

这个问题核心是预览图和按钮的层级、定位关系没处理到位，通过CSS就能彻底解决：

/* 给父容器设置定位参考，让子元素的绝对定位生效 */
#upload {
  position: relative;
  /* 按需设置容器尺寸，建议和预览图目标尺寸一致 */
  width: 220px;
  height: 220px;
}

/* 预览图默认隐藏，选中图片后显示 */
#preview {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填满容器 */
  z-index: 10; /* 提高预览图层级，确保在按钮上方 */
}

/* 按钮容器层级低于预览图，且占满父容器 */
#hide {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* 让自定义按钮居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 给自定义按钮添加基础样式 */
.file-upload {
  cursor: pointer;
  padding: 12px 24px;
  background-color: #f5f5f5;
  border-radius: 6px;
}

/* 隐藏原生文件输入框，只显示自定义按钮 */
#imageInput {
  display: none;
}

额外优化提示 #

• 记得处理用户取消选择图片的场景，避免预览图残留
• 预览图不再使用时，调用URL.revokeObjectURL(preview.src)释放内存，防止内存泄漏

内容的提问来源于stack exchange，提问作者anaislcno