output标签不监听文件输入，需用addEventListener("change",...)手动绑定；files[0].size返回字节数，须校验files.length>0防报错；转换为KB/MB时建议保留一位小数；for属性仅语义关联，不影响功能；iOS Safari对size读取可靠，但HEIC格式可能返回0。
output 标签本身不监听文件输入，必须手动绑定 onchange
output 是纯展示容器，它不会自动响应 <input type="file"> 的变化。常见错误是只写 HTML 结构却没加 JS 监听，导致界面上始终为空或显示默认值。
正确做法是用 addEventListener("change", ...) 捕获用户选中文件的瞬间，并把计算出的大小写入 output 的 value 属性（或 textContent）：
<input type="file" id="fileInput">
<output name="fileSize" for="fileInput">—</output>
<script>
const input = document.getElementById("fileInput");
const output = document.querySelector('output[name="fileSize"]');
input.addEventListener("change", () => {
if (input.files.length === 0) {
output.value = "—";
return;
}
const size = input.files[0].size; // 字节数
output.value = `${(size / 1024).toFixed(1)} KB`;
});
</script>
注意 files[0].size 返回的是字节数，不是字符串
直接读 input.files[0].size 得到的是 number 类型，单位为字节。别误以为它是带单位的字符串，也别漏掉空文件校验 —— 用户点取消或清空后 files.length 可能为 0，此时访问 files[0] 会得 undefined，再取 .size 就报 Cannot read property 'size' of undefined。
- 务必先判断
input.files.length > 0 - 转换时建议用
size / 1024得 KB，或size / 1024 / 1024得 MB - 避免用
Math.round()，它可能把 99.5 KB 四舍五入成 100 KB，而用户更习惯看一位小数
for 属性只是语义关联，不影响功能
<output for="fileInput"> 中的 for 属性仅用于可访问性（如屏幕阅读器），对 JS 行为零影响。即使删掉它，只要 JS 正确获取 DOM 节点，反馈依然正常工作。
立即学习“前端免费学习笔记（深入）”；
但保留它有好处：
- 符合 WAI-ARIA 实践，
output和input在语义上被声明为一对 - 某些自动化测试工具会检查
for是否匹配id，缺失可能触发警告 - 多人协作时，HTML 结构自解释性更强
移动端 iOS Safari 对 file input 的 size 读取是可靠的
过去有传言说 iOS 上无法读取 files[0].size，那是旧版本（iOS 10 以前）的问题。目前 iOS 14+ 和所有安卓主流浏览器均支持。唯一例外是用户通过“照片”App 选择 HEIC 格式图时，部分旧版 Safari 可能返回 0 —— 这属于系统级限制，和 output 或 JS 无关，也无法绕过。
如果你的应用必须处理这类边缘情况，得额外检查 size === 0 && input.files[0].name，然后提示“无法获取大小，请确认文件有效”。
真正容易被忽略的是：output.value 设为数字或布尔值时，浏览器会自动转成字符串；但设为 null 或 undefined 时，它不会清空，而是保留上次值。所以清空逻辑一定要显式赋值，比如 output.value = "—"。
