清空 input[type="file"] 必须用 DOM 替换或表单重置，因 el.value = "" 受浏览器安全限制常无效；推荐创建新 input 复制 name、multiple、accept 等属性后 replaceWith。
点击清空按钮后 input[type="file"] 值不消失？
直接给 input 元素赋值空字符串（el.value = ""）在大多数浏览器中无效，这是浏览器的安全限制——防止脚本伪造文件上传行为。必须重置整个表单或手动清空其 files 属性。
- 推荐做法是设置
el.files为一个空的FileList对象，但原生 JS 无法构造FileList，所以实际只能用el.value = ""配合 DOM 替换或表单重置 - 若该
input在表单内，调用form.reset()是最可靠的方式，它会同步清空所有控件值，包括files - 单独操作时，最稳妥的是移除旧元素、插入新
input：先保存属性（如name、id），再用el.replaceWith(newInput)
el.value = "" 有时生效，有时不生效？
这取决于浏览器实现和是否触发过用户交互。Chrome 和 Edge 在某些版本中允许 value = "" 清空，但 Firefox 始终拒绝；且一旦用户选过文件，再次设空可能被忽略。这不是 bug，而是规范要求：只有用户主动操作才能修改 files 列表。
- 不要依赖
el.value = ""的返回值判断是否清空成功，它永远返回空字符串，不代表实际状态已更新 - 清空后立即检查
el.files.length，若仍为1，说明未生效，需走 DOM 替换方案 - 避免在
change事件里立刻设value = ""，部分浏览器会因事件队列延迟导致失效
用 DOM 替换法安全清空 input[type="file"]
这是跨浏览器兼容性最高、逻辑最可控的方式：生成一个结构一致的新 input 替换原节点，天然重置 files 和 value。
const clearFileInput = (el) => {
const newInput = document.createElement("input");
newInput.type = "file";
newInput.name = el.name;
newInput.id = el.id;
newInput.multiple = el.multiple;
newInput.accept = el.accept;
el.replaceWith(newInput);
return newInput;
};
// 调用示例
document.getElementById("upload").addEventListener("click", () => {
clearFileInput(document.querySelector('input[type="file"]'));
});
- 务必复制所有影响行为的属性：
name、multiple、accept，否则表单提交或后续 JS 查询会出错 - 如果用了
ref或绑定过事件监听器，替换后需重新绑定，或改用事件委托 - 此法不会触发
change事件，适合“主动清空”场景；若需通知上层状态变化，需手动dispatchEvent
Vue/React 中为什么 v-model 或受控组件清空不了？
框架的响应式机制只管理数据，不直接干预原生 input 的 files 属性。即使把绑定的变量设为 null 或空数组，DOM 上的 input 依然保留上次选择的文件。
立即学习“前端免费学习笔记（深入）”；
- Vue 中：仅靠
v-model无法清空，必须配合ref手动调用clearFileInput或form.reset() - React 中：受控组件的
value属性对type="file"无效（浏览器会忽略），必须用ref.current.files = null—— 但该写法不被支持，最终仍得走 DOM 替换 - 通用建议：封装一个
ClearButton组件，内部调用 DOM 替换逻辑，并向外抛出onClear事件供业务处理
files 属性的只读限制。DOM 替换法看似暴力，却是目前最稳定、最少意外的方式。别省那几行代码，漏掉 accept 或 multiple 复制，上线后就可能卡住上传流程。 
