如何使用 FileReader 正确读取用户本地文本文件内容-js教程-PHP中文网

如何使用 FileReader 正确读取用户本地文本文件内容

本文详解为何直接传入文件路径无法读取文本内容，并演示如何通过安全、合规地读取用户选择的 .txt 文件内容并显示在网页中。

本文详解为何直接传入文件路径无法读取文本内容，并演示如何通过安全、合规地读取用户选择的 .txt 文件内容并显示在网页中。

在 Web 浏览器环境中，JavaScript 无法直接访问本地文件系统路径（如 c:Users...sub.txt）来读取文件内容。这是浏览器严格的安全策略——防止网页未经用户许可擅自读取敏感本地文件。你原代码中：

const path = 'c:\Users\Demostenes\Desktop\sub.txt';
const blob = new Blob([path], {type: 'text/plain'});
const file = new File([blob], 'sub.txt', {type: 'text/plain'});

实际创建的是一个内容为字符串 "c:UsersDemostenesDesktopsub.txt" 的内存文件，而非读取该路径下的真实文件。因此 readAsText() 返回的自然是这个“假文件”的字符串内容（即路径本身），而非磁盘上真正的文本。

✅ 正确做法：必须由用户主动选择文件，借助触发文件选取流程：

Galileo AI

一款面向UI和产品设计的AI生成工具，可以根据设计需求快速创建可编辑的界面方案和视觉原型。

下载

<input type="file" id="fileInput" accept=".txt"><div id="output"></div>

document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  // 验证文件类型（可选但推荐）
  if (!file.type || !file.type.startsWith('text/')) {
    alert('请选择有效的文本文件');
    return;
  }

  const reader = new FileReader();
  reader.onload = function() {
    // 成功读取后，result 即为文件纯文本内容
    document.getElementById('output').textContent = reader.result;
    console.log('文件内容：', reader.result);
  };
  reader.onerror = function() {
    console.error('读取文件失败：', reader.error);
  };
  reader.readAsText(file, 'UTF-8'); // 显式指定编码，避免乱码
});

⚠️ 关键注意事项：