使用filereader可纯前端读取本地文本文件并实时展示：监听input[type="file"]的change事件，调用readastext(file, 'utf-8')异步解析，通过onload将结果插入dom，支持.txt/.log/.md等格式，并显示加载提示与错误信息。
使用 FileReader 读取本地文本文件并在页面实时展示，核心是监听用户选择文件（通过 <input type="file">），用 readAsText() 方法解析内容，再将结果插入 DOM。整个过程不涉及服务器，纯前端完成。
1. 创建文件选择控件并绑定事件
在页面中添加一个文件输入框，并监听 change 事件。注意设置 accept=".txt" 限制类型（可选），并确保只处理第一个文件：
<input type="file" id="fileInput" accept=".txt"><br><div id="output"></div>
JavaScript 中获取文件并启动读取：
const input = document.getElementById('fileInput');<br>input.addEventListener('change', function (e) {<br> const file = e.target.files[0];<br> if (!file) return;<br> // 后续读取逻辑<br>});
2. 使用 FileReader 异步读取文本内容
FileReader 是异步的，需监听 load 事件获取成功结果，error 事件捕获失败原因。推荐指定编码（如 UTF-8）避免中文乱码：
const reader = new FileReader();<br>reader.onload = function () {<br> const content = reader.result;<br> document.getElementById('output').textContent = content;<br>};<br>reader.onerror = function () {<br> console.error('读取失败：', reader.error);<br>};<br>reader.readAsText(file, 'UTF-8');
3. 可选增强：显示加载状态与格式支持
提升体验的小技巧：
- 读取前清空或显示“加载中…”提示，避免旧内容残留
- 检查
file.type或后缀名，过滤非文本文件（如application/json、text/markdown也可按文本处理） - 对大文件可改用
readAsDataURL+ 解码，但一般readAsText足够；超大文件建议配合Stream或分块读取（较复杂，非必需）
4. 完整可运行示例
把上面逻辑整合，直接复制到 HTML 文件中即可测试：
<br><br><br><input type="file" id="fileInput" accept=".txt,.log,.md"><br><pre class="brush:php;toolbar:false;" id="output" style="white-space: pre-wrap; background:#f5f5f5; padding:12px; max-height:400px; overflow:auto;">
<script><br>document.getElementById('fileInput').addEventListener('change', e => {<br> const file = e.target.files[0];<br> if (!file) return;<br> const output = document.getElementById('output');<br> output.textContent = '正在读取...';<br> const reader = new FileReader();<br> reader.onload = () => output.textContent = reader.result;<br> reader.onerror = () => output.textContent = '读取出错：' + reader.error.message;<br> reader.readAsText(file, 'UTF-8');<br>});<br></script>
html>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
