Node.js读取文本文件内容并显示到输入文本框的实现求助
2026-5-28
问题排查与解决方案
我帮你梳理下代码里的几个关键问题，然后一步步给你修复方案：
- 核心环境问题：你在前端JS里用了
require('fs')，但fs是Node.js专属的文件系统模块，普通浏览器根本不支持这个API，这是功能失效的最主要原因。 - 语法小错误：
toString(text)写法不对，text已经是输入框获取到的字符串了，直接用就行；另外你用了===（这是用来做全等比较的），给输入框赋值得用=才行。 - HTML结构问题：你的
<body>标签被不小心嵌套到<head>里面了，这不符合HTML规范，会导致页面渲染出问题，得调整标签层级。
下面分两种常用场景给你解决方案：
场景1：基于Electron这类Node.js+浏览器的混合环境开发
如果是在Electron里做开发，确实可以用fs模块，只需要修正代码里的错误：
修正后的HTML（先修复结构问题）：
<html> <head> <title>Write&ReadFiles</title> <link rel="stylesheet" type="text/css" href="writeread.css"> </head> <body> <h1>Write & Read Files</h1> <div class="read"> <form name="form"> <h3>File Name:</h3> <input class="input" name="textview" type="text"> <h3>Text:</h3> <input class="input" name="textview2" type="text"><br><br> <input class="button" type="button" value="ENTER" onclick="doit()"> </form> </div> <div class="write"> </div> </body> <script src="write.js"></script> <!-- 把script放到body末尾，确保页面DOM先加载完成 --> </html>
修正后的JavaScript：
// 注意：Electron要开启nodeIntegration才能使用require const fs = require('fs'); function doit() { const text = document.form.textview.value; // 直接用text作为文件名，不需要多余的toString转换 fs.readFile(text, (err, buf) => { // 别忘了处理错误，比如文件找不到的情况 if (err) { alert('读取文件出错啦：' + err.message); return; } // 用=赋值，替换掉错误的=== document.form.textview2.value = buf.toString(); }); }
场景2：纯浏览器前端环境（普通网页）
普通浏览器出于安全考虑，不允许直接访问本地文件系统，必须让用户主动选择文件，所以得用HTML5的FileReader API来实现：
修改后的HTML（添加文件选择控件）：
<html> <head> <title>Write&ReadFiles</title> <link rel="stylesheet" type="text/css" href="writeread.css"> </head> <body> <h1>Write & Read Files</h1> <div class="read"> <form name="form"> <h3>选择文件:</h3> <!-- 新增文件选择框，让用户主动选择要读取的文件 --> <input type="file" id="fileInput" class="input"><br><br> <h3>文件内容:</h3> <input class="input" name="textview2" type="text"><br><br> <input class="button" type="button" value="读取文件" onclick="readFile()"> </form> </div> <div class="write"> </div> </body> <script> function readFile() { const fileInput = document.getElementById('fileInput'); const selectedFile = fileInput.files[0]; if (!selectedFile) { alert('请先选择一个文件哦'); return; } const reader = new FileReader(); // 文件读取完成后的回调 reader.onload = function(e) { // 把读取到的内容赋值到输入框 document.form.textview2.value = e.target.result; }; // 以文本格式读取文件 reader.readAsText(selectedFile); } </script> </html>
这样用户选择文件后点击按钮，就能把文件内容显示到输入框里了，完全符合浏览器的安全规则。
内容的提问来源于stack exchange，提问作者Mike Cash
