如何使用JavaScript读取本地文件系统文本文件 适配桌面应用Web控件场景

问题根因 #

你尝试的三种读取方案（XMLHttpRequest、fetch、jQuery.get）本质都是发起HTTP请求拉取资源，而所有主流浏览器及内嵌Web控件默认遵循安全策略，限制file://协议下的本地资源请求，哪怕是同目录的文件也会被拦截，因此才会出现返回空、无响应的问题。
另外你第一个方案的XMLHttpRequest代码存在逻辑错误：onreadystatechange事件会在请求的每个状态变化时触发，readyState为1/2/3时属于请求过程中的正常状态，你在else分支直接弹出错误提示的逻辑本身就有问题，会干扰正常请求流程。

适配你场景的解决方案 #

1. 调整Web控件安全配置（最推荐） #

你是桌面端内嵌Web控件的场景，只需要开启控件的本地文件访问权限即可让原有请求代码正常运行，不同控件的配置逻辑如下：

• WebView2：初始化时添加启动参数--allow-file-access-from-files，或者调用CoreWebView2.SetVirtualHostNameToFolderMapping将本地文件目录映射到虚拟域名，通过虚拟域名访问本地资源
• Electron WebView：在webPreferences配置项中设置webSecurity: false，同时开启本地文件访问权限
• 旧版IE WebBrowser：将本地目录添加到浏览器受信任站点，同时调低对应区域的安全级别允许脚本读取本地资源

2. 直接注入数据绕开文件读写（性能最优） #

既然你是桌面端先生成文本内容、再重载HTML页面，完全可以省去写文件、读文件的步骤：在桌面端重载HTML后，直接调用Web控件的JS执行接口，把文本内容直接注入到页面变量中，比如WebView2可以调用ExecuteScriptAsync执行赋值语句，比读写本地文件更稳定、速度更快。

3. 原生File API方案（适用于需要用户手动选文件的场景） #

如果你的业务逻辑允许用户手动选择文件，可以用原生File API实现，不受安全策略限制：

<input type="file" id="fileSelect" accept=".txt">
<script>
document.querySelector('#fileSelect').addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = function(result) {
    const content = result.target.result;
    alert(content);
    document.getElementById('content').innerText = content;
  }
  reader.readAsText(file);
})
</script>

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