JavaScript File API 用于浏览器端读取处理用户选择的本地文件，核心是通过 input.files 获取 FileList 对象和 FileReader 异步读取文件内容，支持文本、DataURL、ArrayBuffer 等多种解析方式。
JavaScript 中的 File API 主要用来读取、处理用户通过 `` 选择的本地文件，不涉及服务器上传（那是 FormData 或 fetch 的事），核心是浏览器端的文件读取与解析。
获取文件对象：从 input 元素开始
用户选中文件后，input.files 返回一个 FileList 对象（类似数组），每个项都是 File 实例，它继承自 Blob，所以具备 size、type、name、lastModified 等属性。
- 监听
change事件，避免用click—— 用户可能取消选择，change只在真正选中后触发 -
input.files[0]是最常用方式，多文件可遍历input.files - 注意：不能直接给
input.files赋值（出于安全限制），它是只读的
用 FileReader 异步读取文件内容
FileReader 是操作 File/Blob 的核心接口，所有读取方法都是异步的，靠事件回调获取结果。
-
readAsText(file, encoding)：读为字符串，适合 txt、json、csv 等文本文件；默认 utf-8，可指定如'gbk'（需配合encoding库） -
readAsDataURL(file)：生成 base64 数据 URL，常用于预览图片（img.src = result） -
readAsArrayBuffer(file)：读为二进制缓冲区，适合处理音视频、Excel、图像像素等底层操作 - 监听
load事件取reader.result，error事件捕获失败（比如文件过大或编码错误）
常见实用场景示例
不需要框架，几行原生 JS 就能搞定：
立即学习“Java免费学习笔记（深入）”；
-
图片预览：选图后立即显示缩略图 → 用
readAsDataURL，赋值给src -
JSON 文件导入：读取本地配置文件 →
readAsText后JSON.parse()，加 try-catch 处理格式错误 -
大文件分片读取：用
slice(start, end)方法切File为多个Blob，逐个读，避免内存溢出 -
校验文件类型：别只信
file.type（浏览器根据扩展名猜的，不可靠），可用file.slice(0, 4).arrayBuffer()读文件头判断魔数
注意事项和边界情况
File API 看似简单，但几个细节容易踩坑：
- File 对象只在用户主动触发选择时有效，页面刷新后失效（不是持久化存储）
- 读取大文件时，
FileReader会占用内存，建议用abort()取消未完成读取 - Safari 对某些
readAsText编码支持有限，中文文件建议统一用 utf-8 并确保文件本身编码匹配 - 移动端 input file 支持拍照/录像：
基本上就这些。掌握 input.files + FileReader 这两个关键点，90% 的前端文件操作需求都能覆盖。
