必须在dragover和drop事件中均调用event.preventDefault()，否则浏览器默认跳转导致dataTransfer.files为空；优先使用files而非items获取文件，避免目录或跨域兼容问题。
拖拽文件到页面时，drop 事件拿不到文件内容？
直接监听 drop 事件是第一步，但很多人卡在取不到文件——因为默认行为没阻止，浏览器会跳转或打开文件。必须在 dragover 和 drop 中都调用 event.preventDefault()，否则 event.dataTransfer.files 是空的。
常见错误现象：event.dataTransfer.files.length === 0，或者控制台报 Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'（其实是根本没拿到 File 对象）。
- 只在
drop里 preventDefault → 不生效，dragover必须同步处理 - 监听了
document而非具体容器 → 拖拽目标不明确，建议绑定到有明确边界的<div id="drop-area"> <li>误用 <code>event.dataTransfer.items（支持目录/粘贴板等）→ 简单文件替换场景优先用.files，更稳定 - 文本文件：用
element.textContent = reader.result最安全，避免执行脚本 - 已知可信 HTML：用
element.innerHTML = reader.result，但需确保来源可控 - 大文件（>10MB）：考虑用
stream+TextDecoder分块读，避免内存爆掉 - 读取出错时，
reader.error会存在，应检查并提示用户（如"文件损坏或编码不支持"） - 推荐 class 名：添加
drag-over，配border: 2px dashed #007bff和background-color: #f8f9fa - 避免在
dragenter里直接preventDefault()—— 它会干扰子元素的拖拽逻辑，统一在dragover处理 - 移动端不支持原生 drag/drop，需 fallback 到点击上传（
<input type="file">） -
file.name是原始名称（含扩展名），file.lastModified是毫秒时间戳，可用new Date(file.lastModified).toLocaleString() - 不要依赖
file.webkitRelativePath（仅 Chromium 支持且需webkitdirectory） - 如果允许多文件拖入，需明确告诉用户“只处理第一个文件”，或遍历
files数组做合并逻辑
FileReader 读取后怎么安全替换页面内容？
读取完成（load 事件）后，reader.result 是字符串（文本）或 ArrayBuffer（二进制）。替换原有内容前要判断类型：纯文本文件（.txt/.html/.json）可直接赋值给 innerHTML 或 textContent；HTML 文件要注意 XSS 风险，不能无条件设 innerHTML。
使用场景示例：替换一个 <pre class="brush:php;toolbar:false;" id="content"></pre> 区域的内容。
立即学习“前端免费学习笔记（深入）”；
如何让拖拽区域视觉反馈更自然？
仅靠事件监听不够，用户需要明确知道“这里能拖”“正在拖”“可以放”。CSS 的 :hover 不够，得靠 JS 切换 class 控制样式。
关键点：在 dragenter 时加高亮 class，在 dragleave 和 drop 后移除。注意 dragleave 会因子元素触发多次，要用 event.relatedTarget 过滤。
替换后怎么保留原始文件名和最后修改时间？
File 对象本身带 name、lastModified、size 属性，不是 FileReader 读出来的。想显示文件信息，别等读完再取，而是在 drop 回调开头就提取。
例如：把文件名和修改时间写在容器下方，比单纯替换内容更符合用户预期。
最易被忽略的是：拖拽替换后，页面状态没更新 URL 或 history，刷新即丢失。如需持久化，得配合 URL.createObjectURL() 生成临时链接，或把内容存进 localStorage —— 但这不属于“替换原有内容”的核心链路，属于延伸需求。
