重置 file input 后 value 仍显示旧文件名是因为 value 属性只读，需通过 clonenode(true) 重建节点或 form.reset()（但会重置整个表单）来清空 files 和 ui；注意事件监听器需手动处理，框架中还需同步 state。
file input 重置后 value 仍显示旧文件名？
直接赋值 input.value = '' 在多数浏览器里无效，这是 DOM 的安全限制——value 属性是只读的（即使看起来能写），强行设空也不会清掉显示的文件名或内部选中状态。
用 input.files 判断是否真被清空
重置的关键不是改 value，而是让 input.files 变成空 FileList。手动触发重置时，最可靠的方式是重建 DOM 节点：
const fileInput = document.querySelector('input[type="file"]');
fileInput.parentNode.replaceChild(fileInput.cloneNode(true), fileInput);
这会彻底清除选中状态、files 和 UI 显示。注意：如果绑定了事件监听器，需重新绑定；若用了 name 或 id，克隆后保持不变，不影响表单提交。
form.reset() 对 file input 有效但有副作用
如果 input 在 <form></form> 内，调用 form.reset() 确实会清空 file input，但它同时重置所有其他字段——容易误伤已有数据。
- 仅当整个表单都需重置时才用
form.reset() - 单独重置某个
input[type="file"]时，别依赖它 -
form.reset()不会触发change事件，监听不到“被清空”
监听 change 后手动清理要避开循环
常见错误是：在 change 回调里调用重置逻辑，又意外触发新 change，导致死循环。正确做法：
- 用
input.addEventListener('change', handler, { once: true })避免重复绑定 - 重置前先移除监听器：
input.removeEventListener('change', handler) - 不要在
change里调用input.click()或再次触发用户交互
真正麻烦的不是怎么清，而是清完之后 UI 和 JS 状态是否同步——尤其在 React/Vue 这类框架里，DOM 重置了但组件 state 没更新，就容易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
