能否使用FileReader读取主机本地已存在的文件？

嗨，我来帮你把这个问题讲清楚～

首先直接给你结论：不能直接用FileReader读取主机上未经用户主动选择上传的本地文件，这是浏览器的安全机制决定的。

为什么FileReader做不到？ #

FileReader的设计初衷就是处理用户主动上传的文件——比如你通过<input type="file">控件让用户选择本地文件后，这个文件会变成一个File对象，此时FileReader才能读取它的内容。这是因为用户明确授权了网页访问这个文件，浏览器才允许操作。

如果没有用户的主动选择，网页直接尝试读取本地文件系统里的文件，会被浏览器的同源策略和安全限制直接拦截，毕竟没人希望随便打开一个网页，它就能偷偷读取自己电脑里的文件对吧？

那AJAX是唯一的办法吗？ #

其实AJAX（或者现在更常用的fetch API）也不是“直接读取本地文件”，它的前提是你的网页运行在本地服务器环境下：

• 比如你用Python启动一个简单的本地服务器：python -m http.server，然后通过http://localhost:8000访问你的网页，这时候用fetch('./your-file.txt')就能读取同目录下的文本文件了。
• 但如果你直接双击打开本地的HTML文件（URL是file:///xxx/your-page.html），这时候用AJAX读取本地文件也会被浏览器阻止，因为file://协议下的安全限制更严格。

有没有更简便的方法？ #

如果不想搭服务器，最简便的方式还是让用户主动上传文件，用FileReader配合<input type="file">，代码示例大概是这样：

<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(event) {
      console.log('文件内容:', event.target.result);
    };
    reader.readAsText(file);
  }
});
</script>

这种方式不需要服务器，只需要用户主动选择文件，完全符合浏览器的安全规则。

如果是你自己开发测试用，搭个本地服务器也很简单，几分钟就能搞定，之后读取文件就和线上环境一样顺畅了。

另外还有一种特殊场景：浏览器扩展程序。扩展拥有更高的权限，可以申请访问本地文件系统的权限，但这需要用户安装你的扩展并授权，属于比较小众的需求。

总结一下：浏览器的安全限制是核心原因，没有那种“无需用户操作、无需服务器”就能直接读取本地文件的简便方法——毕竟安全永远是第一位的。

内容的提问来源于stack exchange，提问作者Guy