必须用 FileReader 读取本地 JSON 文件，因 fetch/XHR 无法直接访问用户文件；需校验内容而非扩展名，用 readAsText() 后 trim 并去除 BOM 再 JSON.parse，配合 try/catch 处理常见格式错误。
用 FileReader 读取上传的 JSON 文件内容
浏览器里没法直接用 fetch 或 XMLHttpRequest 读取用户本地选中的文件，必须靠 FileReader。它能把 input[type="file"] 拿到的 File 对象转成文本或 JSON 对象。
关键点：不是所有上传的文件都叫 .json，后缀可伪造；真正要校验的是内容是否合法 JSON，而不是扩展名。
- 监听
input的change事件，拿到e.target.files[0] - 新建
FileReader实例，用readAsText()（别用readAsDataURL） - 在
onload里用JSON.parse()解析，加try/catch捕获格式错误 - 不要在
onloadend里解析——此时result可能是null或未就绪
为什么 JSON.parse() 常报错：常见 JSON 格式陷阱
用户上传的“JSON 文件”经常不是标准 JSON：开头有 BOM、结尾多逗号、用了单引号、包含注释、或者其实是 JSONL（每行一个 JSON）。这些都会让 JSON.parse() 直接抛 SyntaxError。
- BOM（
\uFEFF）常见于 Windows 记事本保存的 UTF-8 文件，需手动去除：text.replace(/^\uFEFF/, '') - 单引号或末尾逗号 → 不是合法 JSON，无法绕过，只能提示用户修正或用第三方库（如
json5）解析（不推荐生产环境） - 如果确定是 JSONL，得按换行切分再逐行
JSON.parse() - 空文件或纯空白也会导致
JSON.parse('')报错，解析前先text.trim() !== ''
完整可运行的最小示例（含错误处理）
<input type="file" id="jsonFile" accept=".json" />
<pre id="output"></pre>
<script>
document.getElementById('jsonFile').addEventListener('change', e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
try {
const text = reader.result.replace(/^\uFEFF/, '').trim();
if (!text) throw new Error('文件为空');
const data = JSON.parse(text);
document.getElementById('output').textContent = JSON.stringify(data, null, 2);
} catch (err) {
document.getElementById('output').textContent =
'解析失败：' + err.message + '\n' +
'原始内容（前100字符）：\n' +
reader.result.substring(0, 100);
}
};
reader.onerror = () => {
document.getElementById('output').textContent = '读取文件失败';
};
reader.readAsText(file, 'UTF-8');
});
</script>
大文件或需要流式处理时的替代思路
如果 JSON 文件超过几 MB，FileReader 全量读入内存可能卡顿，且无法中断。这时候不能硬扛，得换策略：
立即学习“前端免费学习笔记（深入）”；
- 用
stream()+TextDecoderStream（Chrome 109+、Firefox 117+ 支持），边读边解析，适合超大 JSON 数组 - 限制上传大小（
input加max-size属性或 JS 检查file.size），比如 >5MB 就拒绝 - 服务端才是大 JSON 的主战场：前端只传
File，后端解析并返回结构化结果，避免把压力全压在浏览器上
真正难的不是读出来，而是判断这个“JSON”到底合不合预期——字段缺不缺、类型对不对、嵌套深不深。这些得靠后续校验，FileReader 只负责打开门。
