javascript如何读取文件_如何使用File API处理用户上传？-js教程-PHP中文网

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

夢幻星辰

发布： 2025-12-18 18:55:02

原创

520人浏览过

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

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

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免费学习笔记（深入）”；

易森网络企业版

如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld

查看详情

HTML：<input type="file" accept="image/*"><img id="preview" alt="javascript如何读取文件_如何使用File API处理用户上传？" >
JS 中选中后调用 reader.readAsDataURL(file)
reader.onload = () => { preview.src = reader.result; }

再比如读取 JSON 文件并解析：