JavaScript可通过File API在浏览器端直接读取用户选择的本地文件，核心是File对象（继承自Blob）与FileReader接口配合；通过<input type="file">获取FileList，用readAsText、readAsDataURL或readAsArrayBuffer异步读取，推荐URL.createObjectURL实现高效图片预览，并注意内存释放与大文件分块处理。
JavaScript 中通过 File API 可以在浏览器端直接读取用户选择的本地文件，无需上传服务器，就能完成文本解析、图片预览、二进制处理等操作。核心在于 File 对象（继承自 Blob）和 FileReader 接口的配合使用。
监听文件选择并获取 File 对象
用户通过 <input type="file"> 选择文件后，input.files 返回一个 FileList，其中每个项都是 File 实例，包含名称、大小、类型、最后修改时间等元信息。
- 设置
multiple属性支持多选；用accept限制文件类型（如"image/*"或".pdf,.docx"） -
input.files[0]是最常用入口，注意判空——用户可能取消选择，此时files.length === 0 -
File是Blob的子类，可直接传给FileReader、URL.createObjectURL()或fetch()构造请求体
用 FileReader 异步读取文件内容
FileReader 提供多种读取方法，根据用途选择：
-
readAsText(file, encoding)：适合读取 .txt、.json、.csv 等文本文件，默认 UTF-8；读取完成后result是字符串 -
readAsDataURL(file)：将文件转为 base64 编码的 Data URL，常用于图片/图标快速预览（赋值给<img src>） -
readAsArrayBuffer(file)：读取为二进制缓冲区，适用于音频分析、PDF 解析、加密计算等底层操作 - 务必监听
onload（成功）、onerror（失败）、onprogress（大文件可显示加载进度）事件
图片本地预览的两种高效方式
不上传即可实时显示用户所选图片，体验更流畅：
立即学习“Java免费学习笔记（深入）”；
-
推荐用
URL.createObjectURL(file)：生成临时内存 URL，性能好、无编码开销；预览后记得调用URL.revokeObjectURL(url)释放引用，避免内存泄漏 -
备选用
readAsDataURL()：适合需对 base64 字符串做进一步处理（如裁剪前存入 localStorage），但大图会明显卡顿且增加内存占用 - 示例：
img.src = URL.createObjectURL(file);即可立即渲染，无需等待解码完成
注意事项与常见问题
File API 运行在浏览器沙箱中，有明确边界：
- 无法主动访问用户任意路径的文件（如
C:\xxx\yyy.jpg），只能响应用户显式选择行为 - 不能读取文件系统目录结构，
<input directory webkitdirectory>仅部分浏览器支持且返回的是扁平FileList - 大文件（如 >500MB）读取易触发内存警告，建议结合
slice()分块读取或使用Stream+ReadableStream（现代浏览器） - 移动端 iOS Safari 对某些 MIME 类型识别较弱，建议用
file.type || file.name.split('.').pop().toLowerCase()辅助判断
