JavaScript 文件上传核心是用 input[type="file"] 获取 File 对象，再通过 FileReader 异步读取内容或生成图片预览；需校验类型大小，支持 readAsText、readAsDataURL、readAsArrayBuffer 等方法。
在 JavaScript 中处理文件上传，核心是利用 input[type="file"] 获取文件对象，再通过 FileReader 读取内容或生成预览。关键不是直接上传，而是先在前端完成读取、校验和预览，提升用户体验。
监听文件选择并获取文件对象
用户点击文件输入框选中文件后，change 事件的 event.target.files 会返回一个 FileList 对象（类似数组）。它包含 File 实例，每个都继承自 Blob，有 name、size、type 等属性。
- 只取第一个文件：
const file = event.target.files[0]; - 检查是否选中：
if (!file) return; - 限制类型示例：
if (!file.type.startsWith('image/')) alert('请上传图片'); - 限制大小示例：
if (file.size > 5 * 1024 * 1024) alert('文件不能超过 5MB');
用 FileReader 读取文本或二进制内容
FileReader 是浏览器内置 API，用于异步读取文件内容。它不发送请求，纯前端操作，适合读取配置文件、日志、JSON 等文本类文件。
- 创建实例：
const reader = new FileReader(); - 监听成功回调：
reader.onload = () => { console.log(reader.result); }; - 开始读取文本：
reader.readAsText(file, 'UTF-8'); - 读取为 base64（常用于小文件或需嵌入 HTML）：
reader.readAsDataURL(file); - 读取为 ArrayBuffer（适合处理音频、PDF 或自定义解析）：
reader.readAsArrayBuffer(file);
快速预览图片（无需上传服务器）
对图片文件，最常用的是 readAsDataURL，将文件转为 data URL 后赋给 src 属性，实现即时预览。
立即学习“Java免费学习笔记（深入）”；
- HTML 示例：
- JS 绑定：
document.getElementById('fileInput').addEventListener('change', handleFile); - 处理函数内：
function handleFile(e) { const file = e.target.files[0]; if (file && file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = () => { document.getElementById('preview').src = reader.result; }; reader.readAsDataURL(file); } }
补充：多图预览与错误处理
若支持多选（multiple），遍历 files 即可；同时别忽略 onerror 和 onloadend，尤其大文件读取失败时能提示用户。
- 捕获读取错误：
reader.onerror = () => console.error('读取失败:', reader.error); - 多图循环预览：用
for (const file of e.target.files)，每次新建FileReader - 避免闭包陷阱：在循环中使用
let声明变量，或把reader和file封装进立即执行函数
不复杂但容易忽略。重点是理解 File → FileReader → result 的链路，以及不同 readAsXxx 方法适用的场景。实际项目中，配合拖拽上传、进度条或压缩逻辑，体验会更完整。
