本文介绍如何通过 HTML 文件输入控件读取用户选择的 JSON 文件，并将其格式化后显示在 textarea 中，重点解决因 getElementsByName 返回节点集合导致的常见 JavaScript 错误。
本文介绍如何通过 html 文件输入控件读取用户选择的 json 文件，并将其格式化后显示在 textarea 中，重点解决因 `getelementsbyname` 返回节点集合导致的常见 javascript 错误。
在 Web 开发中，常需提供“上传并预览 JSON 配置文件”的功能，例如用于 API 测试、数据导入或配置调试。实现该功能的核心是利用 FileReader API 读取本地文件内容，并安全地解析与格式化 JSON 数据。
但原始代码中存在一个关键错误：document.getElementsByName('myFiles') 返回的是 HTMLCollection（类数组对象），而非单个 DOM 元素。因此直接调用 .files 会报错 Cannot read property 'files' of undefined。正确做法是先通过索引 [0] 获取首个匹配元素，再访问其 files 属性。
以下是修复后的完整可运行代码：
<input type="file" id="jsonFileInput" accept=".json" /> <br /> <textarea id="result" rows="12" cols="60" placeholder="JSON content will appear here..."></textarea>
window.metadataFile = function() {
const input = document.getElementById('jsonFileInput');
const files = input.files;
if (files.length === 0) {
document.getElementById('result').value = 'No file selected.';
return;
}
const file = files[0];
// 可选：校验文件类型
if (!file.type || !file.type.startsWith('application/json')) {
alert('Please select a valid JSON file.');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
try {
const raw = e.target.result;
const parsed = JSON.parse(raw); // 验证 JSON 合法性
const formatted = JSON.stringify(parsed, null, 2);
document.getElementById('result').value = formatted;
} catch (err) {
document.getElementById('result').value = `Invalid JSON: ${err.message}`;
}
};
reader.onerror = function() {
document.getElementById('result').value = 'Error reading file.';
};
reader.readAsText(file);
};
// 绑定事件（推荐方式，避免内联 JS）
document.getElementById('jsonFileInput').addEventListener('change', metadataFile);✅ 关键改进说明：
- 使用
getElementById替代getElementsByName，语义更清晰、性能更优； - 添加 MIME 类型校验（
accept=".json"+file.type检查），提升健壮性； - 使用
try...catch捕获JSON.parse()异常，防止非法 JSON 导致脚本中断； - 将事件监听器改为外部绑定，符合现代前端最佳实践，利于维护与测试。
⚠️ 注意事项：
-
FileReader是异步操作，所有处理逻辑必须放在onload回调中； - 不要依赖
onchange="metadataFile()"内联写法——它难以调试且破坏关注点分离； - 生产环境建议增加文件大小限制（如
if (file.size > 5 * 1024 * 1024)）以避免内存溢出。
通过以上实现，用户上传 JSON 文件后，即可在 <textarea></textarea> 中即时查看缩进良好、结构清晰的预览内容，为后续处理提供可靠基础。
