移动端浏览器原生不支持文件拖拽，唯一可靠方式是通过点击触发选择文件；所有“拖拽上传”体验均需用视觉模拟+手动触发文件选择器来实现。
移动端浏览器（包括 iOS Safari 和 Android Chrome）**根本不支持原生 dragstart/drop 文件拖拽**，你绑了事件也完全不会触发——这不是兼容性问题，是规范层面禁用。所谓“文件拖拽”在触屏上只能靠「文件选择」+「视觉模拟」来逼近体验。
为什么 input[type="file"] 是唯一可靠入口
所有移动端 WebKit 内核浏览器只允许通过显式点击 触发文件选择器；dragover 和 drop 在 touch 环境下永远不触发，event.dataTransfer.files 在 touch 事件中为 null 或只读。
- 哪怕你给
div加了draggable="true"并监听drop，手指划过也不会进入dragover状态 -
input[type="file"]的change事件是唯一能拿到FileList的合法通道 - 部分安卓 WebView 可能响应
touchend后的drop，但行为不可靠、无dataTransfer.files、iOS 全面失效
如何模拟“拖拽上传区”的触屏交互
用户期望的是“把文件‘拖’进某个区域”，实际要拆解为：视觉反馈 + 手动触发文件选择 + 状态同步。关键不是监听拖拽，而是接管点击/触摸行为并隐藏原生 input。
- 用
label包裹隐藏的input[type="file"]，设置display: none或opacity: 0 - 目标区域绑定
click（PC）和touchend（移动），调用input.click()，避免直接click()在 iOS 上被拦截 - 添加
touch-action: manipulation到目标区域，防止长按触发菜单或误滚动 - 拖拽态视觉反馈用 CSS 类控制（如加
is-over），但不要依赖dragenter——它在移动端永不触发
防坑要点：别碰 dataTransfer，别信 polyfill 声称的“文件拖拽”
市面上所谓 “drag-drop-touch” 类库，仅能模拟 DOM 元素拖放（如排序卡片），**对文件上传完全无效**——因为它们无法绕过浏览器对 dataTransfer.files 的硬性封锁。任何声称“让移动端支持 drop 文件”的方案，底层仍是触发 input[type="file"]。
- 不要在
touchmove中尝试读取event.dataTransfer.files，它一定是空的 - 不要给目标区设
ondragover="e.preventDefault()"，这行代码在移动端毫无作用 - 如果需多文件，
input必须带multiple属性；iOS 16+ 支持多选，旧版仅单文件 - 上传前校验文件类型/大小，必须在
input.change后立刻做，不能等“拖拽结束”
真正复杂的点在于：用户心理预期是“拖”，而技术现实是“点选”。所有视觉动效、占位符、加载态，都得围绕这个断裂点设计——不是让它“像拖拽”，而是让用户忘记自己没真拖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
