File API 是浏览器原生接口,用于在用户授权后读取本地文件:通过 input 或拖放获取 File 对象,用 FileReader 异步读取,支持 readAsText、readAsDataURL、readAsArrayBuffer 三种方法,适用于预览、校验、离线处理等场景。

File API 是浏览器提供的原生接口,允许网页在用户授权后读取本地文件内容,无需上传到服务器。它核心依赖 File 对象(通常来自 `` 或拖放事件)和 FileReader 对象来异步读取数据。
基础使用步骤
读取文件分三步:获取文件对象 → 创建 FileReader 实例 → 调用读取方法并监听结果。
- 通过
获取文件:const file = document.getElementById('fileInput').files[0]; - 创建读取器:
const reader = new FileReader(); - 设置回调并启动读取:
reader.onload = () => { console.log(reader.result); };
reader.readAsText(file); // 或 readAsDataURL、readAsArrayBuffer
常用读取方法及适用场景
readAsText():把文件按指定编码(如 UTF-8)转为字符串,适合处理文本类文件(.txt、.json、.csv、.log)。
readAsDataURL():生成 base64 编码的 URL,可直接赋给 或 ,适合预览图片、音频等二进制资源。
readAsArrayBuffer():返回原始二进制缓冲区,适用于需要精细操作的场景,比如解析 Excel(xlsx)、PDF 元数据、图像像素处理(配合 Canvas)、或加密/压缩前端计算。
典型应用场景
客户端文件预览:用户选择图片后立即显示缩略图,不发请求;上传前校验 CSV 行数或 JSON 格式是否合法。
离线数据处理:用户导入本地日志文件,前端用正则提取错误信息;加载本地 .geojson 文件并在地图上渲染,不依赖后端接口。
隐私敏感操作:密码管理器类工具让用户本地解密加密文件(密钥不离开浏览器),全程不上传明文。
富媒体编辑器支持:Markdown 编辑器拖入图片自动转为 dataURL 插入;音视频剪辑工具读取本地媒体文件进行时间轴分析。
注意事项与限制
File API 只能读取用户主动选择的文件,无法随意访问磁盘路径——这是浏览器安全模型决定的,不是功能缺陷。
大文件读取需注意内存占用,建议用 slice() 分块读取,或结合 Stream(如 file.stream() + ReadableStream)做流式处理。
IE10+ 支持 FileReader,现代浏览器均兼容;但部分旧安卓 WebView 对 readAsArrayBuffer 支持不稳定,生产环境建议降级兜底。










