本文介绍如何通过 HTML 文件输入控件和 JavaScript FileReader API，安全、规范地读取并格式化显示用户上传的 JSON 文件内容到文本域中，重点解决 getElementsByName 返回集合导致的常见错误。
本文介绍如何通过 html 文件输入控件和 javascript filereader api，安全、规范地读取并格式化显示用户上传的 json 文件内容到文本域中，重点解决 `getelementsbyname` 返回集合导致的常见错误。
要在网页中实现 JSON 文件上传后的实时预览功能，核心在于正确获取文件对象、异步读取内容，并对 JSON 进行语法校验与格式化显示。你提供的代码逻辑基本正确，但存在一个关键错误：document.getElementsByName('myFiles') 返回的是 HTMLCollection（类似数组的元素集合），而非单个 DOM 元素，因此不能直接访问 .files 属性。
✅ 正确做法是先通过索引 [0] 获取第一个匹配元素，再访问其 files 属性：
<input type="file" id="jsonFileInput" accept=".json" /> <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 || files.length === 0) {
document.getElementById('result').value = '⚠️ No file selected.';
return;
}
const file = files[0];
// 可选：校验文件类型
if (!file.name.toLowerCase().endsWith('.json')) {
document.getElementById('result').value = '❌ Please select a valid .json file.';
return;
}
const reader = new FileReader();
reader.onload = function(e) {
try {
const rawContent = e.target.result;
const parsed = JSON.parse(rawContent); // 验证是否为合法 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, 'UTF-8'); // 显式指定编码，避免中文乱码
};
// 绑定事件（推荐用 addEventListener 替代内联 onchange）
document.getElementById('jsonFileInput').addEventListener('change', metadataFile);? 关键改进说明：
- 使用
id+getElementById替代getElementsByName，语义更清晰、性能更优； - 添加
.json文件类型限制（accept=".json"）和后缀校验，提升用户体验与健壮性； - 包裹
JSON.parse()在try...catch中，防止非法 JSON 导致脚本中断，并友好提示错误； - 指定
readAsText(file, 'UTF-8')编码参数，确保中文等 Unicode 字符正确解析； - 移除内联
onchange，改用addEventListener，符合现代 Web 开发最佳实践。
? 小贴士：若需支持多文件预览、拖拽上传或语法高亮，可进一步集成 monaco-editor 或 prism.js 等库，但基础场景下原生方案已足够轻量可靠。
