拖拽图片触发FileReader需监听drop事件并阻止默认行为，从e.dataTransfer.files取File对象，用file.type.startsWith('image/')校验类型，每个文件新建独立FileReader实例，readAsDataURL异步完成后再使用result。
拖拽图片到页面时如何触发 FileReader 读取
必须监听 drop 事件并阻止默认行为，否则浏览器会直接跳转到图片地址或下载。关键在于从 event.dataTransfer.files 中提取 File 对象，而非 event.dataTransfer.items（后者在部分场景下可能为空或需额外处理）。
- 只允许处理
image/*类型的File，用file.type.startsWith('image/')判断更稳妥，比正则或后缀检查兼容性更好 -
FileReader是异步的，readAsDataURL完成后才能拿到 base64 字符串，不能在reader.readAsDataURL(file)后立刻访问reader.result - 多个文件时，每个
File都要新建独立的FileReader实例，复用会导致状态混乱
用 FileReader.readAsDataURL 预览图片的最小可行代码
以下代码片段可直接插入 HTML 页面的 <script></script> 中运行，支持单图或多图拖入，自动创建 <img alt="html5拖放api拖拽图片到页面怎么预览_FileReader读取方法【指南】" > 并插入页面顶部：
const dropArea = document.body;
dropArea.addEventListener('dragover', e => e.preventDefault());
dropArea.addEventListener('drop', e => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files);
files.forEach(file => {
if (!file.type.startsWith('image/')) return;
const reader = new FileReader();
reader.onload = () => {
const img = document.createElement('img');
img.src = reader.result;
img.style.maxWidth = '300px';
img.style.margin = '8px';
document.body.insertBefore(img, document.body.firstChild);
};
reader.readAsDataURL(file);
});
});
为什么 FileReader 有时读不出图片或报错
常见失败不是因为 API 写错，而是环境或数据本身异常：
-
FileReader的onerror回调不抛出错误对象，而是设置reader.error，需手动检查：if (reader.error) console.error(reader.error) - 用户拖入的是文件夹（
file.type === ''）、快捷方式、或系统临时文件（如 macOS 的.DS_Store），这些都会导致readAsDataURL静默失败 - Chrome 在某些沙盒环境下（如 iframe 无
allow="clipboard-read"`）可能限制 <code>dataTransfer.files访问，此时files.length === 0 - 大图（如 >100MB）可能导致内存溢出或长时间卡顿，
FileReader不提供进度回调，无法优雅降级
替代方案：用 URL.createObjectURL 更快预览但要注意释放
如果只是预览、不需要 base64（比如后续不上传或不存档），URL.createObjectURL(file) 比 FileReader 更快且无大小限制，但必须手动调用 URL.revokeObjectURL() 避免内存泄漏：
立即学习“前端免费学习笔记（深入）”；
reader.onload = () => {
const img = document.createElement('img');
img.src = URL.createObjectURL(file); // ← 直接用 blob URL
img.onload = () => URL.revokeObjectURL(img.src); // ← 加载成功后立即释放
document.body.insertBefore(img, document.body.firstChild);
};
注意：blob URL 只在当前文档生命周期内有效，刷新即失效；而 base64 字符串是纯文本，可持久化保存或跨域传输。
