直接在ondrop事件中调用event.preventdefault()后，通过event.datatransfer.files获取filelist对象，再用array.from()转为数组操作；必须同步阻止dragover和drop的默认行为，否则files为空。
ondrop 事件里怎么拿到拖进来的文件？
直接在 ondrop 里用 event.dataTransfer.files 就能取到，但前提是必须阻止默认行为，否则浏览器会直接打开或跳转——这是绝大多数人卡住的第一步。
-
ondrop触发时，event.dataTransfer才有效；如果没写event.preventDefault()，files是空的，甚至整个事件可能被浏览器拦截 - 只靠
ondrop不够，得先让容器“接受拖放”，也就是给元素加ondragover="event.preventDefault()"（或者绑定同逻辑的监听） -
event.dataTransfer.files是FileList对象，不是数组，要用Array.from()或展开运算符转成数组才能用map、forEach等方法
为什么绑了 ondrop 还收不到文件？
常见原因是事件冒泡或父级拦截导致 dataTransfer 被清空，或者用了不支持的拖放源（比如从桌面拖 Chrome 地址栏链接进来，files 就是空的）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 确保拖拽源是真实文件（如资源管理器/ Finder 中的 .jpg、.pdf），而不是网页内文本、URL 或其他非文件内容
- 检查是否误在父容器上写了
ondrop，结果事件被上层提前消费，子元素收不到 - 某些浏览器（如 Safari）对跨域 iframe 拖入文件有额外限制，
files可能始终为空
怎么安全读取拖进来的文件内容？
拿到 File 对象后不能直接读路径（浏览器禁止访问本地文件系统路径），只能用 FileReader 或 URL.createObjectURL() 做临时引用。
- 用
FileReader读文本：调readAsText(file)，监听onload拿event.target.result - 预览图片：用
URL.createObjectURL(file)得到 blob URL，赋给<img src="...">即可 - 别直接用
file.path或file.fullPath—— 这些属性在标准浏览器里是 undefined，只有 Electron 等特殊环境才存在
兼容性注意点：Firefox 和移动端的坑
Firefox 对 dataTransfer.items 支持更早，但某些版本下 files 在非文件拖放时返回空数组而非 null；iOS Safari 则根本不支持从文件 App 拖放文件到网页（仅支持点击上传）。
- 如果需要更高兼容性，可以 fallback 到
event.dataTransfer.items：遍历items，用item.getAsFile()提取文件 - 移动端基本无原生 drag-and-drop 文件支持，别依赖
ondrop做核心流程，得搭配<input type="file"> - Chrome 98+ 开始支持
dataTransfer.files在多文件拖放时保持顺序，但旧版可能乱序，别假设顺序可靠
ondragover="event.preventDefault()" + ondrop="handleDrop(event)"，handleDrop 里第一行写 event.preventDefault()，再取 event.dataTransfer.files。漏掉任意一个 preventDefault，整个链就断了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
