删除图片后重新上传无法在img标签显示的问题求助

我来帮你搞定这个问题！你遇到的情况是删除图片后再次上传时图片不显示，控制台提示找不到图片src，核心原因主要有两个：一是删除操作后没清空文件输入框的内容，导致再次选择同一张图片时，onchange事件不会触发（因为文件输入框的value没变化）；二是重新创建img元素时没还原原有的尺寸属性，虽然不影响src，但会导致显示样式不一致。

咱们先看看原代码里的几个小问题：

• 上传按钮的<label>标签没正确闭合，可能导致点击行为异常
• 删除图片后未清空文件输入框的value，同图重选时onchange不触发
• 重新创建的img元素缺少原有的height和width属性

下面是调整后的完整代码，已经修复了这些问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

<button><label for="file">Upload Image</label></button> 
<button onclick="deleteFile()">Delete</button> 

<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p> 
<p id="p_img"><img id="output" height="200" width="200"></p>

<script>
var loadFile = function(event) { 
  var image = document.getElementById('output'); 
  // 先释放之前的Object URL，避免内存泄漏
  if (image.src) {
    URL.revokeObjectURL(image.src);
  }
  image.src = URL.createObjectURL(event.target.files[0]); 
}; 

function deleteFile() { 
  var image = document.getElementById('output'); 
  // 释放Object URL
  if (image.src) {
    URL.revokeObjectURL(image.src);
  }
  image.parentNode.removeChild(image); 
  
  var img = document.createElement("img"); 
  img.id = "output"; 
  // 还原原有的尺寸属性
  img.height = 200;
  img.width = 200;
  $("#p_img").append(img); 

  // 清空文件输入框的value，确保再次选择同一张图片时onchange能触发
  document.getElementById('file').value = '';
}
</script>

关键改动说明： #

• 修复了<label>标签的闭合问题，确保上传按钮点击正常响应
• 在deleteFile函数中添加了清空文件输入框的逻辑，这样不管用户选新图还是同一张图，onchange事件都会触发，图片就能正常加载
• 重新创建img元素时补上了height和width属性，保持和初始状态一致的显示效果
• 新增了URL.revokeObjectURL的调用，释放之前创建的Object URL，避免不必要的内存占用（这是个优化点，让代码更规范）

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