javascript如何实现文件上传_如何读取和预览上传的文件

FileReader是读取文件内容的唯一标准API，需通过onload回调获取结果；URL.createObjectURL()适合轻量预览但须手动revoke防内存泄漏；文件校验应结合type与size而非仅依赖后缀。

用 FileReader 读取上传的文件内容

用户选择文件后， 元素的 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; 
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免费学习笔记（深入）”；

• 仅适用于可被 、、 直接加载的 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; 
const url = URL.createObjectURL(file); previewImg.src = url;
// 清理：下次选图前先释放上一个 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; }

处理多个文件及拖拽上传的最小可行逻辑

原生 支持多选，e.target.files 是类数组；拖拽上传则需监听 drop 事件并阻止默认行为，从 e.dataTransfer.files 取文件。

容易忽略的是：拖拽时用户可能误拖文件夹或非文件项（如网页链接），需过滤 items 中的 kind !== 'file' 项；另外，FileList 是只读的，无法用数组方法直接操作，得转成数组再 map 或 filter。

• 拖拽目标元素必须监听 dragover 并 e.preventDefault()，否则 drop 事件不会触发
• 移动端不支持拖拽，需保留 作为降级入口
• 批量读取多个文件时，避免全部用 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 会让已释放的文件仍被内存引用，尤其在单页应用反复上传时，内存占用会持续上涨。