JavaScript中如何读取本地文件_FileReader对象-js教程-PHP中文网

JavaScript中如何读取本地文件_FileReader对象

狼影

发布： 2025-12-05 20:37:02

原创

331人浏览过

JavaScript读取本地文件需通过FileReader异步处理用户选择的文件，无法直接访问任意本地路径；常用readAsText（文本）、readAsDataURL（base64）、readAsArrayBuffer（二进制）等方法，并支持onprogress监听进度。

javascript中如何读取本地文件_filereader对象

JavaScript 中读取本地文件主要依靠 FileReader 对象，它允许异步读取用户通过 `` 选择的文件内容。注意：出于安全限制，JS 无法直接读取任意本地路径的文件（比如 C:\xxx.txt），只能处理用户主动选择的文件对象。

获取文件对象

通常从 `` 元素中获取：

<input type="file" id="fileInput">
<script>
  const input = document.getElementById('fileInput');
  input.addEventListener('change', function(e) {
    const file = e.target.files[0]; // 用户选中的第一个文件
    if (file) {
      readTextFile(file);
    }
  });
</script>

登录后复制

使用 FileReader 读取文本文件

适用于 .txt、.json、.csv 等纯文本格式：

function readTextFile(file) {
  const reader = new FileReader();
<p>reader.onload = function(e) {
console.log('文件内容：', e.target.result); // 字符串形式
};</p><p>reader.onerror = function() {
console.error('读取失败：', reader.error);
};</p><p>reader.readAsText(file, 'UTF-8'); // 指定编码，避免中文乱码
}

登录后复制

读取为其他格式

根据需求选择对应方法：

TabTab AI

首个全链路 Data Agent，让数据搜集、处理到深度分析一步到位。

279

查看详情

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

readAsDataURL(file)：转为 base64 字符串，适合预览图片或上传前处理
readAsArrayBuffer(file)：读为二进制缓冲区，适合处理音频、视频、Excel 等需底层操作的文件
readAsBinaryString(file)（已废弃，不推荐）：旧 API，兼容性差，应避免使用

监听读取进度（可选）

对大文件可显示加载状态：

reader.onprogress = function(e) {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total * 100).toFixed(1);
    console.log(`加载中... ${percent}%`);
  }
};

登录后复制

基本上就这些。关键点是：必须由用户触发选择文件，不能绕过交互自动读取；读取是异步的，结果在 onload 回调里获取；编码和格式选对，才能正确解析内容。

以上就是JavaScript中如何读取本地文件_FileReader对象的详细内容，更多请关注php中文网其它相关文章！