html怎么读取本地文本文件

嘿，这话题我熟啊！上周有个客户就问我怎么在网页里读本地文件，当时我给他们拆得明明白白。

你说的这几个方法确实都靠谱：
1 . FileReader API 这招最常用，特别适合那种需要用户手动上传文件的情况。
比如做个文本编辑器，让用户选个本地文件来编辑。
代码你贴的挺好，<input type="file"> 一挂，用户点开选择文件，然后 FileReader.readAsText() 异步读出来，直接在控制台或者 DOM 里展示。
这完全在客户端跑，服务器根本不知道，安全得很。
缺点就是必须用户配合点开文件选择框。
我记得去年我在上海搞个培训，演示这个的时候，有个学员问能不能后台偷偷读，我直接说不行，浏览器卡死防护机制了，能干这事的只有 Electron 那类原生应用。

2 . XMLHttpRequest/FetchAPI 这两个适合读取跟你网页同源的静态文件。
比如你本地用 LiveServer 开了个 http://localhost:8 08 0 的站点，想读根目录下的 config.txt，用 fetch('config.txt') 就行。
这需要文件和网页在同一个域名、端口下。
要是直接用 file:// 协议打开的 HTML 文件去读，比如 file://C:/myproject/index. 去读同文件夹的 data.txt，这肯定不行，浏览器安全策略硬限制的。
我在北京调试的时候踩过这个坑，花了半天以为代码错了，结果发现忘了用 LiveServer，直接双击打开 HTML 的。
得启动个本地服务器才行。
FetchAPI 现代点，链式调用 .then() 看着顺眼，兼容性也还行。

关键点必须敲黑板： 安全限制：浏览器根本不让网页随便去读用户硬盘，这是硬性规定。
能读的文件，要么是用户自己点选的（通过 <input type="file">），要么是跟你网页在同一个地方（同源策略）。
想突破这俩限制？基本没戏，除非你用 Electron 那类打包成原生应用，或者浏览器扩展，那就不叫纯 HTML 啦。
同源要求：XMLHttpRequest 和 FetchAPI 这俩对同源要求特别死。
你在本地用 http://localhost:3 000 开发，去读 http://localhost:3 000/data.txt 正常，但读 http://example.com/data.txt 就 4 03 Fetch 还能带个 credentials: 'include' 试试（虽然同源一般不用这参数），XMLHttpRequest 基本没用。

推荐场景？ 要用户主动上传文件？比如上传文档预览、导入配置啥的，FileReader 绝对首选。
要读网页同源目录下的文件？FetchAPI 更简洁现代，但前提是你得有个本地服务器，不能直接用 file:// 打开。
XMLHttpRequest 也能干，稍微老派点。

你给的完整流程示例（FileReader）就很实用，
 标签直接把文件内容展示出来，比 console.log 友好多了。
调试的时候，要是 Fetch 失败，先检查路径对不对，再确认是不是用 http:// 开头的协议访问的，基本就能定位了。

反正你看着办，FileReader 足够覆盖 9 0% 的场景了。
如何在HTML网页中实现选择本地文件夹的功能？
结论：用JavaScript + FileSystemAccessAPI选文件夹，先查兼容性。

代码：检测API，不支持就提示换浏览器。

结论：用showDirectoryPicker让用户选文件夹。

代码：用户选，返回目录句柄。

结论：用dirHandle递归读文件夹内容。

代码：文件是文件，目录是目录，递归读。

结论：示例HTML，按钮+隐藏提示。

代码：按钮触发selectFolder，显示提示。

结论：注意兼容、授权、安全和错误。

代码：检查浏览器，请求授权，避免过度访问，处理错误。

结论：不支持API，上传文件或拖放。

代码：input file选文件，拖放API配合后端。
如何使用(html)超链接打开本地文件
电脑准备好了吗？
浏览器也打开着？
编辑器用哪个？我那个朋友用Sublime Text的。

新建个文件，叫index.。

body里面写这段：

点击打开本地文件

保存一下。

然后浏览器打开这个index.文件。

点击那个超链接。

如果成功了，就打开了test.txt。

test.txt得在同一个文件夹里才行。

不然会打不开。

算了。
web前端入门到实战：HTML引入文件的绝对路径、相对路径、根目录
哎，说到绝对路径和相对路径，这俩玩意儿在编程里就像老友一样，总得有个清楚。
我以前在做网站开发的时候，这俩可是天天打交道。

先说绝对路径，这就像你给朋友指路，得说清楚从哪儿到哪儿。
比如，你要访问一个网站上的图片，你得写上完整的网址，就像这样：https://example.com/image.jpg。
要是你在电脑上找文件，那也得写明具体位置，比如D:\images\aaa.jpg，这就像告诉朋友他家在D盘的images文件夹里。

绝对路径的好处是明确，不会出错，但缺点是如果你把文件移动了，链接就失效了，你得重新设置。

相对路径就灵活多了，它告诉你文件在哪儿，但不是具体位置。
比如，你可以说“上一级目录的css文件夹中的style.css”，用“../”表示上一级目录，这样不管文件怎么动，只要路径关系不变，链接就不会失效。

我记得有一次，一个网站改版，服务器地址都换了，当时我一看，相对路径就帮了大忙，因为它们不依赖于服务器地址。

根目录嘛，那就像是电脑硬盘的起点，比如C盘、D盘，都是根目录。
网站根目录就相当于网站的大本营，所有的文件都是从这儿开始的。

现在想想，学这些的时候，我还挺头大的，但用起来就方便多了。
从HTML、CSS到JavaScript，再到框架和移动端开发，这些工具和知识都是一步步积累起来的。

对了，如果你对前端开发感兴趣，想系统学习，可以加入【WEB前端学习圈⑤】，那里有视频教程、工具和系统路线图，对初学者来说是个不错的选择。
我当时就是从那儿开始学的，现在回想起来，还挺怀念那时候的。