首先通过FileReader读取用户本地文本文件，再利用change事件触发读取操作；接着创建FileReader实例并调用readAsText方法异步读取文件内容；然后在onload事件中获取结果并输出到控制台或页面元素；同时在读取前通过file.type和file.size验证文件类型与大小，确保为文本文件且不超过1MB；最后将读取的文本内容插入指定DOM节点并保留换行格式以正确显示。
如果您需要在网页中直接读取用户本地的文本文件内容，可以通过HTML5提供的FileReader对象实现。以下是具体的操作方法：
一、使用FileReader读取文本文件
FileReader接口允许Web应用程序异步读取用户选择的文件内容，返回字符串形式的数据。通过监听输入框中的文件选择事件，可以触发读取操作。
1、在HTML页面中添加一个文件输入控件：
2、获取该元素的引用并绑定change事件：
立即学习“前端免费学习笔记（深入）”；
const fileInput = document.getElementById('fileInput');
3、在事件处理函数中创建FileReader实例：
const reader = new FileReader();
4、为reader对象设置onload事件，用于接收读取结果：
reader.onload = function(event) {
const result = event.target.result;
console.log(result);
};
5、调用readAsText方法开始读取文件：
里面有2个文件夹。其中这个文件名是:finishing，是我项目还没有请求后台的数据的模拟写法。请求后台数据之后，瀑布流的js有一点点变化，放在文件名是：finished。变化在于需要穿参数到后台，和填充的内容都用后台的数据填充。看自己项目需求来。由于chrome模拟器是不允许读取本地文件json的，所以如果你要进行测试，在hbuilder打开项目就可以看到效果啦，或者是火狐浏览器。
reader.readAsText(fileInput.files[0]);
二、检测文件类型和大小
在读取前对文件进行验证，可避免非文本文件导致的解析错误。通过文件对象的type和size属性判断是否符合要求。
1、在读取前检查文件是否存在以及是否为文本类型：
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
if (!file.type.startsWith('text/')) {
alert('请选择一个文本文件');
return;
}
}
2、限制文件大小以防止加载过大文件：
if (file.size > 1024 * 1024) {
alert('文件不能超过1MB');
return;
}
3、将验证逻辑放在触发readAsText之前，确保安全性。
三、显示读取内容到页面
将读取到的文本内容动态插入到指定的DOM元素中，使用户能够直观查看结果。
1、在页面中准备一个用于显示内容的容器：
2、在reader.onload中将result赋值给该元素：
const output = document.getElementById('output');
output.textContent = event.target.result;
3、若需保留换行格式，可使用
标签包裹内容以保持原始排版。
