本文讲解为何直接使用文件路径无法读取本地文本内容，以及如何通过html文件输入控件安全、合规地读取用户选择的.txt文件并显示其文本内容。
本文讲解为何直接使用文件路径无法读取本地文本内容，以及如何通过html文件输入控件安全、合规地读取用户选择的.txt文件并显示其文本内容。
在前端开发中，浏览器出于严格的安全策略，禁止JavaScript直接访问用户本地文件系统中的任意路径（如 c:Users...sub.txt）。你当前代码的问题在于：
const path = 'c:\Users\Demostenes\Desktop\sub.txt';
const blob = new Blob([path], {type: 'text/plain'});
const file = new File([blob], 'sub.txt', {type: 'text/plain'});
这段逻辑并未读取磁盘上的真实文件，而是将字符串 'c:\Users\...' 本身当作文件内容创建了一个虚拟 File 对象——因此 readAsText() 返回的自然是该路径字符串，而非实际文件内容。
✅ 正确做法是：让用户主动选择文件，通过 触发标准文件选择对话框，再用 FileReader 读取其内容：
<input type="file" id="fileInput" accept=".txt"><div id="output"></div>
document.getElementById('fileInput').addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file) return;
// 验证是否为文本文件
if (!file.type || !file.type.startsWith('text/')) {
alert('请选择有效的文本文件（.txt等）');
return;
}
const reader = new FileReader();
reader.onload = function () {
// 成功读取后，将内容插入到页面中
document.getElementById('output').textContent = reader.result;
};
reader.onerror = function () {
console.error('文件读取失败:', reader.error);
alert('读取文件时发生错误，请重试。');
};
reader.readAsText(file, 'UTF-8'); // 显式指定编码，避免中文乱码
});
⚠️ 注意事项：
- 不能绕过用户交互：File 对象必须来自用户显式选择（如 或拖放事件），无法通过硬编码路径构造真实本地文件。
- 编码很重要：readAsText(file, 'UTF-8') 中指定字符编码可避免中文、特殊符号显示为乱码；若不确定编码，可尝试 'GBK'（Windows 环境常见）。
- 安全性保障：此机制确保用户对每个文件访问拥有完全知情权和控制权，是现代Web平台的核心安全边界。
总结：Web应用无权“主动读取”用户硬盘上的任意文件。一切文件读取行为都必须以用户主动授权为前提——这是设计使然，而非技术限制。遵循此原则，不仅能保证功能正常，更是尊重用户隐私与安全的必要实践。
