真正清空 file input 需同步归零 files、value、change 事件、预览 URL 和软键盘焦点；推荐 form.reset()（需满足 input 在 form 内、有 name 属性、不在 submit 中调用）或 input.type = "file" 重建。

拖拽文件后 input.value 不变，但显示为空

这是最常被忽略的“假清空”现象：你把文件拖进 <input type="file"> 后，再用 input.value = "" 看似清了，但 DOM 中的 files 列表仍存在（input.files.length > 0），且下次点击输入框时可能仍显示旧文件名。浏览器出于安全限制，不允许 JS 直接写入 files，只能靠重置或替换。

• input.value = "" 只清空字符串值，不触碰 files 对象，也不触发 change 事件
• 真正清空需调用 input.type = "file" 强制重建（兼容所有浏览器）或 input.outerHTML = input.outerHTML（更轻量，但会丢失绑定事件）
• 若该 input 在 <form></form> 内，直接用 form.reset() 最稳妥——它会同步清空 value 和 files

用 reset() 清空 file input 的前提条件

form.reset() 能清空 <input type="file">，但必须满足三个硬性条件，缺一不可：

• 该 input 必须是 <form></form> 的后代节点（哪怕嵌套多层 <div> 也行） <li> <code>input 必须有 name 属性，例如 <input type="file" name="avatar">；没 name 的控件不会被 reset() 触及
• 不能在 submit 事件中直接调用 reset() 后再 preventDefault() ——部分浏览器（如 Safari）会在 reset() 执行前就销毁 files 引用，导致上传逻辑拿不到文件

拖拽结束时手动触发清空逻辑

如果你用的是自定义拖拽区域（非原生 input），而把文件存到了变量里，那清空“输入框”其实是清空视觉状态 + 重置 DOM。关键不是删数据，而是让 UI 回到初始态：


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 隐藏已上传预览图、清空文件名文本（如 document.getElementById("filename").textContent = ""）
• 将原生 <input type="file"> 的 value 设为空，并调用 input.dispatchEvent(new Event("change", { bubbles: true }))，确保监听 change 的代码能响应
• 如果用了 URL.createObjectURL(file) 生成预览 URL，记得配套调用 URL.revokeObjectURL(url)，否则内存泄漏

移动端软键盘 + 拖拽混合场景的坑

在 iOS 或 Android 上，用户先点输入框唤出软键盘，再拖拽文件进去，此时清空后若不手动 input.focus()，软键盘不会自动收起，页面会卡在半交互状态。

立即学习“前端免费学习笔记（深入）”；

• 清空后立即执行 input.focus()，哪怕 input 是 type="file"（iOS 支持对 file input 聚焦以重新唤起选择器）
• 避免在 drop 事件里直接 input.click() ——这在部分 Android WebView 中会报错 click() is not allowed without user activation
• 如果拖拽目标是 div 而非 input，清空逻辑要同步更新关联的 input 元素，否则表单提交时仍会带上旧文件
拖拽后的状态清理，核心不是“怎么设 value”，而是“哪些状态变量和 DOM 属性必须同步归零”。files、value、change 事件、预览 URL、软键盘焦点——漏掉任意一个，都会让“清空”变成半残操作。