JavaScript：删除后重新添加的图片无法显示在预览区

• 浏览器有个默认机制：如果用户选择的文件和上一次完全相同，文件输入框的change事件不会触发。你删除预览图后，文件输入框的value还保留着之前的文件路径，重新选同一张图时，输入框的值没变化，绑定的预览逻辑（change事件回调）根本没执行，自然看不到预览。
• 选另一张图时，输入框value改变，触发change事件，此时输入框的值更新为新文件的路径。之后再选原来的图，输入框的值从新路径变回原路径，又发生了变化，所以能触发change事件，预览正常显示。

直接在删除预览图的逻辑里，重置文件输入框的value为空字符串即可：

// 示例：删除按钮的点击事件处理函数
deleteBtn.addEventListener('click', function() {
  this.parentElement.remove(); // 原有的删除figure代码
  // 新增：重置文件输入框
  document.querySelector('input[type="file"]').value = '';
});

也可以在文件输入框被点击时先重置value，确保每次选择文件都能触发change事件：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('click', function() {
  this.value = '';
});

这样不管是不是重复选择同一张图，只要选中文件，change事件都会触发，预览逻辑就能正常执行。

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