17370845950

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 处理失败

常见实用场景示例

比如上传图片并即时预览：

• 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 → 结果 的链路，再结合业务加点容错和交互，就很稳妥了。