FileReader是浏览器提供的用于读取本地文件内容的API，通过结合获取用户选择的文件后，使用readAsText、readAsDataURL等方法异步读取文本、图片预览或二进制数据，并在onload回调中处理结果，同时需监听onerror处理异常，适用于文本解析、图片预览等场景。
在前端开发中，有时需要让用户选择本地文件并读取其内容，比如上传前预览文本、图片或 CSV 文件。JavaScript 提供了 FileReader API 来实现对本地文件的异步读取，而无需将文件发送到服务器。
FileReader 是什么？
FileReader 是浏览器提供的 Web API，用于读取 File 或 Blob 对象的内容。它支持多种格式输出，如文本、Data URL（base64）、ArrayBuffer 等。
通常结合 使用，用户选择文件后，通过 FileReader 读取内容并展示或处理。
基本使用步骤
以下是使用 FileReader 读取本地文件的基本流程：
立即学习“Java免费学习笔记（深入）”；
创建一个文件输入控件供用户选择文件 监听文件选择事件，获取 File 对象 创建 FileReader 实例 调用读取方法并监听 onload 事件获取结果示例：读取文本文件内容
document.getElementById('fileInput').addEventListener('change', function(e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(event) { document.getElementById('output').textContent = event.target.result; }; reader.readAsText(file); // 以文本形式读取});
常用的读取方法
FileReader 提供了几个不同的读取方式，根据文件类型选择合适的方法：
readAsText(file, encoding)：将文件读取为纯文本。常用于 .txt、.csv、.json 等文本文件 readAsDataURL(file)：将文件读取为 Data URL（base64 编码），适合图片预览 readAsArrayBuffer(file)：以 ArrayBuffer 形式读取，适用于二进制文件如 PDF、音频、视频等 readAsBinaryString(file)：读取二进制字符串（较少使用）示例：预览本地图片
@@##@@document.querySelector('input[type="file"]').addEventListener('change', function(e) { const file = e.target.files[0]; if (!file || !file.type.match('image/')) return; const reader = new FileReader(); reader.onload = function(event) { document.getElementById('preview').src = event.target.result; }; reader.readAsDataURL(file);});
错误处理与注意事项
读取文件过程中可能发生错误，例如文件过大、权限问题等，可以通过监听 onerror 事件捕获异常。
reader.onerror = function() { console.error('文件读取失败:', reader.error);};
注意点：
FileReader 是异步操作，不能同步获取结果 只能读取用户主动选择的文件，无法访问任意本地路径 大文件读取可能影响性能，尤其是转为 base64 时 兼容性良好，现代浏览器均支持 FileReader基本上就这些。掌握 FileReader 可以让你在前端灵活处理本地文件内容，提升用户体验。
以上就是JavaScript 文件操作：FileReader 读取本地文件内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533550.html
微信扫一扫 
支付宝扫一扫 
