JavaScript需通过用户触发的<input type="file">获取文件，再用FileReader读取；乱码因编码不匹配，大文件应分块处理；上传须用FormData+fetch，服务端配置常被忽略。
JavaScript 怎么触发文件选择并读取内容
浏览器环境下的 JavaScript 无法直接访问本地文件系统，必须由用户主动触发 <input type="file">，再通过 FileReader 读取内容。这是安全限制，绕不过。
关键步骤：绑定 change 事件 → 获取 input.files[0] → 创建 FileReader 实例 → 调用 readAsText() 或 readAsArrayBuffer()。
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result); // 文本内容
};
reader.onerror = () => {
console.error('读取失败:', reader.error);
};
reader.readAsText(file, 'UTF-8'); // 指定编码很重要
});
为什么读出来是乱码或空字符串
最常见原因是没传编码参数，或文件本身不是 UTF-8 编码。比如 Windows 记事本保存的 ANSI 文件，用 readAsText(file) 不加编码会默认按 UTF-8 解，必然出错。
-
readAsText(file, 'GBK')可读中文 Windows 默认编码（需确认来源） -
readAsText(file, 'ISO-8859-1')适合某些旧日志或服务器返回的原始字节流 - 不确定编码时，先用
readAsArrayBuffer()+TextDecoder尝试自动检测（但 JS 原生不支持自动识别，需第三方库如jschardet）
大文件读取卡死或内存爆掉怎么办
FileReader 会把整个文件加载进内存，几 MB 就可能卡 UI，百 MB 以上极易崩溃。不能无脑 readAsText。
立即学习“Java免费学习笔记（深入）”；
- 用
readAsArrayBuffer()+ 分块读取（file.slice()）+ 流式解析 - 对 CSV/JSON 等结构化文本，优先考虑
StreamAPI（Chrome 109+ 支持Response.arrayBuffer()配合ReadableStream，但File本身暂不支持直接 stream） - 真实大文件场景（如日志分析），应后端接收上传，前端只传分片或用
fetch+FormData
怎么上传文件到服务器（不是只读取）
读取只是前端动作；上传必须走 HTTP 请求。最常用的是 FormData + fetch：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('upload', file); // 'upload' 是后端期待的字段名
try {
const res = await fetch('/api/upload', {
method: 'POST',
body: formData,
// ⚠️ 不要手动设 Content-Type，让浏览器自动加 boundary
});
console.log(await res.json());
} catch (err) {
console.error(err);
}
});
注意：FormData 会自动设置 Content-Type: multipart/form-data，且带正确 boundary；手动设置反而会导致 400。
真正容易被忽略的是：服务端是否配置了文件大小限制（如 Nginx 的 client_max_body_size）、是否允许该 MIME 类型、是否有 CSRF 保护拦截了 FormData 请求——这些错误不会在前端报“上传失败”，而是静默 4xx 或超时。
