FileReader是读取文件内容的唯一标准API，需通过onload回调获取结果；URL.createObjectURL()适合轻量预览但须手动revoke防内存泄漏；文件校验应结合type与size而非仅依赖后缀。
用 FileReader 读取上传的文件内容
用户选择文件后，<input type="file"> 元素的 files 属性会返回一个 FileList，其中每个项都是 File 对象（继承自 Blob）。要读取内容，必须用 FileReader，不能直接读取 File 实例。
常见错误是试图用 JSON.parse(file) 或 file.text()（未等 Promise）——File 没有同步读取方法，text() 是 Blob 的异步方法，但需注意浏览器兼容性（如 Safari 16.4+ 才稳定支持）。
-
FileReader.readAsText(file)：适合文本文件（.txt、.json、.csv），可指定编码（如utf-8） -
FileReader.readAsDataURL(file)：适合生成预览（图片、PDF），结果是 base64 字符串，注意大文件会导致内存压力 -
FileReader.readAsArrayBuffer(file)：适合二进制处理（如音频分析、加密校验）
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
<p>const reader = new FileReader();
reader.onload = () => {
console.log('文件内容：', reader.result); // text 或 data URL
};
reader.onerror = () => {
console.error('读取失败：', reader.error);
};
reader.readAsText(file, 'utf-8'); // 显式指定编码防乱码
});用 URL.createObjectURL() 快速预览图片或 PDF
如果只是显示缩略图或内嵌预览，FileReader.readAsDataURL() 不是最佳选择：base64 数据体积比原始文件大 33%，且无法被浏览器缓存。更轻量的方式是创建临时对象 URL。
注意：createObjectURL() 返回的是生命周期绑定到当前文档的 URL，页面刷新或导航后自动失效；必须手动调用 URL.revokeObjectURL() 释放内存，否则可能造成内存泄漏（尤其在频繁选图场景）。
立即学习“Java免费学习笔记（深入）”；
- 仅适用于可被
<img>、<iframe>、<video>直接加载的 MIME 类型（如image/*、application/pdf） - 不适用于文本内容提取（看不到原始字符）
- 部分旧版 iOS Safari 对 PDF 预览支持不稳定，建议 fallback 到下载链接
const previewImg = document.getElementById('preview');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;
<p>const url = URL.createObjectURL(file);
previewImg.src = url;</p><p>// 清理：下次选图前先释放上一个 URL
previewImg.onload = () => URL.revokeObjectURL(url);
});限制上传文件类型和大小的实用判断
前端验证不能替代后端校验，但能立刻反馈、减少无效请求。关键不是只看 file.name 后缀（易伪造），而应优先检查 file.type 和 file.size。
file.type 由浏览器根据文件头或扩展名推测，不一定准确（如无后缀的文本文件可能为 ""），所以需组合判断；file.size 是精确字节数，可放心用。
- 图片限制示例：
file.type.startsWith('image/') && file.size - PDF 限制示例：
file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf') - 多类型允许：
['image/jpeg', 'image/png', 'image/webp'].includes(file.type)
function isValidFile(file) {
if (!file) return false;
if (file.size > 10 * 1024 * 1024) { // 10MB
alert('文件不能超过 10MB');
return false;
}
if (!file.type.startsWith('image/')) {
alert('请上传图片文件');
return false;
}
return true;
}处理多个文件及拖拽上传的最小可行逻辑
原生 <input type="file" multiple> 支持多选，e.target.files 是类数组；拖拽上传则需监听 drop 事件并阻止默认行为，从 e.dataTransfer.files 取文件。
容易忽略的是：拖拽时用户可能误拖文件夹或非文件项（如网页链接），需过滤 items 中的 kind !== 'file' 项；另外，FileList 是只读的，无法用数组方法直接操作，得转成数组再 map 或 filter。
- 拖拽目标元素必须监听
dragover并e.preventDefault()，否则drop事件不会触发 - 移动端不支持拖拽，需保留
<input>作为降级入口 - 批量读取多个文件时，避免全部用
FileReader并发——浏览器限制并发数，且易 OOM；建议节流或队列化
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files).filter(f => f.kind === 'file');
files.forEach(file => {
if (isValidFile(file)) {
const url = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = url;
img.onload = () => URL.revokeObjectURL(url);
dropArea.appendChild(img);
}
});
});实际项目中，最常被跳过的一步是 URL.revokeObjectURL() ——它不报错，但长期驻留的对象 URL 会让已释放的文件仍被内存引用，尤其在单页应用反复上传时，内存占用会持续上涨。
