javascript如何读取文件_如何使用File API处理用户上传？

JavaScript通过File API纯前端读取用户上传文件，核心是获取File对象，再用FileReader异步读取为文本、base64或ArrayBuffer；支持多选、图片预览、JSON解析等场景，受限于安全策略无法获取真实路径，IE9及以下不支持。

JavaScript 读取用户上传的文件，主要靠 File API，它不依赖后端，纯前端就能完成选择、读取、预览等操作。核心是通过 <input type="file"> 获取 File 对象，再用 FileReader 读取内容。

获取用户选择的文件

监听 input 元素的 change 事件，从 e.target.files 中拿到 FileList（类似数组）：

• 每个 File 对象继承自 Blob，自带 name、size、type 等属性
• 支持多选：给 <input> 加 multiple 属性，files 就可能是多个文件
• 注意：files 是只读类数组，不能用 forEach，需转成数组或用 for...of

用 FileReader 读取文件内容

FileReader 是异步读取的核心，支持多种格式，常用方法有：

• readAsText(file, encoding)：读为字符串，适合 txt、json、代码类文件
• readAsDataURL(file)：读为 base64 字符串，适合图片预览（直接赋给 <img src alt="javascript如何读取文件_如何使用File API处理用户上传？" >）
• readAsArrayBuffer(file)：读为二进制缓冲区，适合处理音视频、加密、解析二进制格式
• 监听 onload 拿到结果（e.target.result），onerror 处理失败

常见实用场景示例

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

立即学习“Java免费学习笔记（深入）”；

标签： javascript java html js 前端 json 浏览器 安卓 后端