JavaScript通过File API纯前端读取用户上传文件，核心是获取File对象，再用FileReader异步读取为文本、base64或ArrayBuffer；支持多选、图片预览、JSON解析等场景，受限于安全策略无法获取真实路径，IE9及以下不支持。
JavaScript 读取用户上传的文件，主要靠 File API，它不依赖后端，纯前端就能完成选择、读取、预览等操作。核心是通过 获取 File 对象，再用 FileReader 读取内容。
获取用户选择的文件
监听 input 元素的 change 事件，从 e.target.files 中拿到 FileList（类似数组）：
- 每个
File对象继承自Blob，自带name、size、type等属性 - 支持多选：给
加multiple属性，files就可能是多个文件 - 注意：
files是只读类数组，不能用forEach，需转成数组或用for...of
用 FileReader 读取文件内容
FileReader 是异步读取的核心，支持多种格式，常用方法有：
-
readAsText(file, encoding)：读为字符串，适合 txt、json、代码类文件 -
readAsDataURL(file)：读为 base64 字符串，适合图片预览（直接赋给 -
readAsArrayBuffer(file)：读为二进制缓冲区，适合处理音视频、加密、解析二进制格式 - 监听
onload拿到结果（e.target.result），onerror处理失败
常见实用场景示例
比如上传图片并即时预览：
立即学习“Java免费学习笔记（深入）”；
- HTML：
- JS 中选中后调用
reader.readAsDataURL(file) reader.onload = () => { preview.src = reader.result; }
再比如读取 JSON 文件并解析：
- 用
readAsText读出字符串，再JSON.parse()转对象 - 记得加 try-catch，防止 JSON 格式错误导致脚本中断
注意事项和限制
File API 是浏览器原生能力，但有几点要留意：
- 无法直接读取文件路径（出于安全限制，
file.path是空的） - 大文件读取可能卡顿，建议配合
progress事件做加载提示 - IE10+ 支持基本功能，但
FileReader在 IE9 及以下不可用 - 移动端同样可用，但部分安卓 WebView 对
accept属性支持较弱
基本上就这些。不需要额外库，标准 API 就够用。关键在于理解 File → FileReader → 结果 的链路，再结合业务加点容错和交互，就很稳妥了。
