当用户取消已选图片后再次选择相同文件时，浏览器不会触发`onchange`事件，导致预览功能失效；需在关闭按钮点击时重置文件输入框的值，才能重新触发事件并正常预览。
在基于 PHP 与 JavaScript 的前端图片上传预览场景中，一个常见却容易被忽视的问题是：重复选择同一个文件时， 的 onchange 事件不会再次触发。这是因为浏览器将文件输入框的 value 视为受控状态——只有当所选文件路径真正发生变化时，才会触发该事件；若用户先选了 photo.jpg，点击“×”关闭预览，再手动重新选择同一个 photo.jpg，其 value 实际未变（仍为 "C:\fakepath\photo.jpg" 或空字符串），因此 preview() 函数不会执行，图片自然无法更新。
根本解决方案是在用户点击“关闭”按钮时，不仅清空 的 src 和隐藏按钮，还必须显式清空文件输入框的 value，使其恢复初始未选中状态。这样下次选择任意文件（包括同名文件）都会触发 onchange：
$('#closebtn').click(function() {
$('#thumb').attr('src', '');
$('#closebtn').hide();
$('#my_file').val(''); // ✅ 关键修复：重置 file input 值
});同时，建议优化 preview() 函数以增强健壮性，例如检查文件是否存在、添加 MIME 类型校验，并使用现代 DOM API 替代隐式 event 全局变量：
function preview() {
const fileInput = document.getElementById('my_file');
const thumb = document.getElementById('thumb');
const closeBtn = document.getElementById('closebtn');
if (fileInput.files && fileInput.files[0]) {
const file = fileInput.files[0];
// 可选：限制图片类型
if (!file.type.match('image.*')) {
alert('请选择有效的图片文件！');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
thumb.src = e.target.result;
thumb.style.display = 'block';
closeBtn.style.display = 'inline-block';
};
reader.readAsDataURL(file);
}
}⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 不要依赖 URL.createObjectURL() 后不释放对象 URL（虽短期无害，但长期可能造成内存泄漏）；如需严格管理，可在切换文件或页面卸载时调用 URL.revokeObjectURL()；
- jQuery 的 .show('') 和 .hide('') 中传入空字符串是非标准用法，应直接使用 .show() / .hide() 或 .css('display', '...')；
- 确保 #my_file 在 DOM 加载完成后绑定事件（推荐将脚本置于
