HTML中input[type="text"]无法接收拖放文件，因其不支持drop事件；正确做法是用div等容器监听dragover/drop事件，解析文件名后赋值给input。
HTML 本身不支持直接把文件拖进 <input type="text">，这是浏览器的硬性限制——input 元素（包括 text、number 等）无法接收 drop 事件，哪怕你加了 draggable="true" 或绑了监听器也没用。
为什么不能往 text input 里拖文件
浏览器对表单控件做了严格隔离：input[type="text"] 只接受键盘输入和脚本赋值，drop 事件根本不会冒泡到它身上，也不会被触发。你看到的“拖不进去”，不是代码写错了，是 DOM 层面被禁用了。
-
drop事件只会在明确允许放置的容器上触发（比如<div>、<code><section></section>），且必须在dragover中调用event.preventDefault() -
input类元素没有“放置目标”语义，即使强行监听drop，回调也永远不会执行 - 试图用
event.stopPropagation()或覆盖默认样式来绕过，全部无效 - HTML 结构保持
<input type="text" id="filePath">，但视觉上把它和拖放区并排或叠加（用 CSS 定位） - 拖放区绑定
dragover和drop，在drop里读取event.dataTransfer.files[0].name或完整路径（仅限本地调试，生产环境拿不到绝对路径） - 拿到文件名后，赋值给
document.getElementById('filePath').value - 如果需要上传，后续再用
FormData提交整个表单，而不是依赖 input 的 value 传文件 -
name：文件名（含扩展名），100% 可用 -
size：字节数，可用于校验大小 -
type：MIME 类型（如"image/png"），但可能为空（尤其 Windows 下某些文件） -
绝对路径？ 浏览器出于安全限制，
file.path在所有现代浏览器中都不可访问（Chrome/Firefox/Safari 均返回空字符串或抛错） -
文件内容？ 不在
drop时自动加载，必须显式用FileReader或URL.createObjectURL()读取
替代方案：用 div 模拟可拖区域 + 同步更新 text input 值
真实项目中想实现“拖文件进文本框”的效果，本质是视觉欺骗：用一个可拖放的 <div> 接收文件，解析后把路径/文件名填进旁边的 <code>input。
dataTransfer.files 能拿到什么，不能拿到什么
拖放时从 event.dataTransfer.files 取出的 File 对象，只有三个可靠字段：
立即学习“前端免费学习笔记（深入）”；
移动端根本别试
iOS 和 Android 的 WebView 及原生浏览器基本不支持 dragstart/drop 事件，连 dragover 都可能静默失败。如果你的应用要兼容手机端，拖放文件功能必须降级为点击 <input type="file">，不要试图 hack。
最常被忽略的一点：很多人花几小时调 input 的拖放，最后发现连事件监听器都没触发——不是漏写了 preventDefault()，是根本没选对目标元素。拖放的入口永远是容器，不是表单控件本身。
