如何实现表单type=file上传图片提交前可重复替换上传功能

需求说明 #

开发带图片上传功能的表单，用户上传图片后，在表单正式提交前可随时替换已上传的图片。

原有问题代码 #

JavaScript 部分 #

function previewImage() {
  var thisElement = event.target
  var file = thisElement.files;
  var fileReader = new FileReader();
  fileReader.onload = function(event) {
    thisElement.nextElementSibling.setAttribute("src", event.target.result);
  }
  thisElement.style.display = 'none';
  fileReader.readAsDataURL(file[0])
};

HTML 部分 #

<input type="file" id="file1" accept="image/*" onchange="previewImage();">
<img id="display1"><br>
<input type="file" id="file2" accept="image/*" onchange="previewImage();">
<img id="display2"><br>
<input type="file" id="file3" accept="image/*" onchange="previewImage();">
<img id="display3"><br>
<input type="file" id="file4" accept="image/*" onchange="previewImage();">
<img id="display4"><br>

问题原因 #

首次上传完成后代码直接将type=file文件输入框设置为display: none隐藏，且没有提供其他触发文件选择的入口，导致用户无法二次选择文件替换已上传图片。

修正后完整代码 #

CSS 部分（优化交互体验） #

/* 无预览图时自动隐藏图片标签 */
img:not([src]) {
  display: none;
}
/* 统一预览图尺寸，避免布局错乱 */
img {
  max-width: 200px;
  max-height: 200px;
  object-fit: cover;
  border: 1px solid #e5e5e5;
  margin: 8px 0;
  cursor: pointer;
}

JavaScript 部分 #

function previewImage() {
  const fileInput = event.target;
  const selectedFile = fileInput.files[0];
  // 未选择文件时直接返回，避免报错
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = function(e) {
    const previewImg = fileInput.nextElementSibling;
    // 更新预览图地址
    previewImg.src = e.target.result;
    previewImg.title = "点击替换图片";
    // 点击预览图时主动触发文件选择框，实现替换功能
    previewImg.onclick = () => fileInput.click();
    // 上传完成后隐藏原生文件选择框，页面更美观
    fileInput.style.display = 'none';
  }
  reader.readAsDataURL(selectedFile);
}

HTML 部分（无需修改原有结构，直接复用即可） #

<input type="file" id="file1" accept="image/*" onchange="previewImage();">
<img id="display1"><br>
<input type="file" id="file2" accept="image/*" onchange="previewImage();">
<img id="display2"><br>
<input type="file" id="file3" accept="image/*" onchange="previewImage();">
<img id="display3"><br>
<input type="file" id="file4" accept="image/*" onchange="previewImage();">
<img id="display4"><br>

实现逻辑说明 #

• 初始状态显示原生文件选择按钮，用户点击即可首次上传图片
• 首次上传完成后隐藏原生文件选择框，显示预览图
• 给预览图绑定点击事件，点击后主动触发对应文件输入框的选择操作，用户选择新图片后会自动更新预览内容，实现提交前无限次替换图片的需求
• 增加空文件判断、预览图样式优化，避免异常报错和布局错乱

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