浏览器限制input[type="file"]的value为只读属性，清空必须通过克隆节点等dom重置方式，而非赋值空字符串。
file input 无法用 value = '' 清空的底层原因
浏览器出于安全限制，input[type="file"] 的 value 属性是只读的——哪怕你写 el.value = ''，它也会被忽略或立即恢复为上次选中的文件路径（在部分旧版 IE 中甚至抛错）。这不是 bug，而是规范强制行为，防止脚本偷偷读取用户本地文件系统。
真正有效的清空动作，必须触发 DOM 层级的“重置”或“替换”，而不是改 value。
可靠清空 file input 的三种实操方式
以下方法均经 Chrome/Firefox/Safari（2026 年主流版本）验证有效，按推荐顺序排列：
- 最稳：克隆并替换节点 ——
el.parentNode.replaceChild(el.cloneNode(true), el)。它完全重建 DOM 节点，清除所有内部状态（包括已选文件、校验标记、files对象），且不触发页面重绘抖动 - 次选：设
el.type = 'text'; el.type = 'file'。利用 type 切换强制重置，但 Safari 17+ 对此有兼容性波动，需加 try/catch - 慎用：
el.value = null或el.value = undefined。仅在部分 Chromium 内核中短期生效，下一帧可能自动回填，不建议用于生产环境
AJAX 提交后清空 file input 的典型陷阱
常见错误是把清空逻辑写在 fetch().then() 里：
- 如果请求失败（网络中断、4xx/5xx），用户看到文件已消失，却无法重试上传
- 如果接口返回慢，用户连续点击提交按钮，可能触发多次克隆，导致 DOM 泄漏
- 没检查
el.files.length就执行清空，对未选文件的控件做克隆是冗余操作
正确做法：只在确认上传成功（如收到 200 + 正确响应体）后再克隆；清空前加判断 if (el.files.length > 0)。
带 multiple 的 file input 清空时要注意什么
input[type="file"][multiple] 的清空逻辑和单文件一致，但容易被忽略两点：
- 不能只靠
el.files.length判断是否已选 —— 某些安卓 WebView 下，即使用户取消选择，files仍可能为非空FileList（含 0 个文件），应同时检查el.files.item(0) - 如果表单用了
FormData.append('files', el.files)，清空控件后FormData实例里的引用依然存在，不会自动失效。清空控件 ≠ 清除已构造的 FormData
真正需要“清空历史记录”，本质是切断浏览器对已选文件的内部引用。克隆节点是最接近底层 reset 行为的操作，其他花式赋值都绕不开这个前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
