不能。draggable="true"仅对网页内DOM元素有效，文件拖拽依赖dragover/drop事件及event.dataTransfer.files；未在dragover中调用preventDefault()则drop不触发，浏览器会默认打开或下载文件。
拖拽文件到网页里，不是加个 draggable="true" 就行——它只对 DOM 元素有效，对文件无效。真正起作用的是浏览器对 File 对象的原生支持，靠的是 dragover 和 drop 事件配合 event.dataTransfer.files。
为什么拖文件进页面却没反应？
最常见原因是没阻止默认行为：浏览器一看到文件被拖进来，会直接尝试打开或下载，根本不会触发 drop。必须在 dragover（以及 drop）里调用 e.preventDefault()。
- 漏掉
dragover.preventDefault()→drop永远不触发 - 只在
drop里 prevent → 拖入瞬间浏览器就跳走了（比如 PDF 自动预览、图片弹新页） - 监听对象错了：比如绑在
body上但中间有stopPropagation()的父层，事件根本传不到
怎么拿到拖进来的文件？
event.dataTransfer.files 是个 FileList，不是数组，不能直接用 map 或 forEach。得先转成真数组，或者用 for...of 遍历。
-
files里每个项是File实例，继承自Blob，有name、size、type等属性 - 别直接读
files[0]—— 用户可能拖多个文件，files.length === 0时会报错 - 校验类型建议用
file.type.startsWith('image/')而不是只比对完整 MIME，更容错（比如image/jpeg和image/jpg）
拖拽区域怎么加视觉反馈？
光靠 dragenter 和 dragleave 切换 class 不够稳：鼠标快速划过多个子元素时，会高频进出，导致样式闪动。稳妥做法是用一个标志位 + dragover 防抖。
立即学习“前端免费学习笔记（深入）”；
- 在
dragenter里设isDragging = true，并加高亮 class - 在
dragover里也加 class（确保悬停持续生效） - 在
dragleave里启动一个setTimeout，延迟 30ms 再检查是否还有别的dragenter进来；没的话才移除 class - 别忘了
drop和dragend后也要清理状态
上传前能预览图片吗？
可以，但别在 drop 里直接用 FileReader.readAsDataURL() 全量读——大图会卡 UI。优先用 URL.createObjectURL(file) 创建临时 blob URL，立刻显示缩略图。
-
createObjectURL是同步、轻量的，适合预览 -
FileReader更适合需要内容解析的场景（比如读取 CSV 文本、校验 JSON 结构） - 记得在预览后或上传完成时调用
URL.revokeObjectURL()，否则内存泄漏 - 如果用户拖了 100 个文件，别一次性生成 100 个预览 URL，加个数量限制或懒加载
跨 iframe 拖文件？不行。同源也不行——这是浏览器硬性限制，dataTransfer.files 在跨 frame 场景下为空。真要支持，得用 postMessage + input[type=file] 隐藏触发作为备选方案。
