HTML5的FileReader API支持读取本地文件内容及获取基本信息：一、通过input type=”file”获取File对象；二、用readAsText读取文本；三、用readAsDataURL生成Data URL预览资源；四、用readAsArrayBuffer读取二进制数据；五、直接访问File属性获取元数据。
如果您希望在网页中直接读取用户选择的本地文件内容或获取其基本信息，HTML5 提供了 FileReader API 来实现这一功能。以下是具体操作步骤：
一、使用 input type=”file” 获取文件对象
FileReader 的操作起点是用户通过文件输入控件选择的 File 对象。该对象不仅包含文件内容，还携带名称、大小、类型等元数据，是后续读取操作的基础。
1、在 HTML 中添加一个带有 multiple 属性（可选）和 accept 属性（可选）的文件输入元素：。
2、通过 JavaScript 获取该元素并监听 change 事件：document.getElementById(‘fileInput’).addEventListener(‘change’, handleFileSelect);。
立即学习“前端免费学习笔记（深入）”；
3、在事件处理函数中，从 event.target.files[0] 提取第一个 File 对象：const file = event.target.files[0];。
二、读取文件文本内容（readAsText）
该方法将文件以指定字符编码解析为字符串，适用于纯文本类文件（如 .txt、.json、.csv、.html 等），默认编码为 UTF-8。
1、创建 FileReader 实例：const reader = new FileReader();。
2、为 reader 设置 onload 事件处理程序，在其中访问 reader.result 获取解析后的文本字符串。
3、调用 reader.readAsText(file, ‘UTF-8’); 启动异步读取。
三、读取文件为 Data URL（readAsDataURL）
该方法将文件内容编码为 base64 格式的 Data URL 字符串，常用于预览图片、音频或二进制资源，无需服务器中转即可在页面中直接渲染。
1、创建 FileReader 实例：const reader = new FileReader();。
2、监听 onload 事件，将 reader.result 赋值给 img 元素的 src 属性或 video/audio 的 src 属性。
3、调用 reader.readAsDataURL(file); 开始读取。
四、读取文件为 ArrayBuffer（readAsArrayBuffer）
该方法将文件原始字节流读取为 ArrayBuffer，适用于需要底层二进制处理的场景，例如解析图像头信息、加密解密、WebAssembly 数据加载等。
1、创建 FileReader 实例：const reader = new FileReader();。
2、监听 onload 事件，从 reader.result 获取 ArrayBuffer 对象。
3、调用 reader.readAsArrayBuffer(file); 启动读取。
五、仅获取文件属性而不读取内容
File 对象本身即继承自 Blob，具备 name、size、type、lastModified 等只读属性，无需 FileReader 即可直接访问，适合快速校验或显示文件信息。
1、从 input 元素获取 File 对象后，直接读取其属性：file.name 获取文件名。
2、使用 file.size 获取字节数，file.type 获取 MIME 类型（可能为空字符串）。
3、通过 file.lastModified 获取最后修改时间戳，可用 new Date(file.lastModified) 转为可读日期。
以上就是html5怎么读取文件_html5用FileReader API读取本地文件内容或属性【读取】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607471.html
微信扫一扫 
支付宝扫一扫 
![将 char[] 转换为 List：Arrays.asList() 的正确用法](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/176023356598268-480x300.jpg)
