直接读取 file.size 即可获取字节数，需在 change 事件中通过 event.target.files[0].size 获取，多选时依次访问 files[1] 等，注意判空和清空 input.value 以确保重复选择触发事件。
直接读取 file.size 就能拿到字节数
HTML5 的 File 对象自带 size 属性，单位是字节，不需要额外计算或请求头解析。只要用户在 input[type="file"] 中选中文件，就能立刻访问它。
常见错误是等表单提交才读——那时已晚，且可能没触发事件。必须在 change 事件里取值：
-
event.target.files[0]是第一个选中的文件对象，.size即大小 - 若用户多选，用
files[1]、files[2]依次访问 - 注意判空：
if (!file || !file.size)，某些 iOS WebView 或旧 Safari 可能返回0 - 别依赖
accept属性——它只过滤类型，对大小完全无效
把字节数转成易读格式要自己写逻辑
浏览器不提供自动格式化方法，file.size 永远是原始数字。显示 “2.4 MB” 这类文本得手动换算。
关键点不是“怎么写”，而是“怎么写得稳”：
- 用
Math.round((file.size / 1024 / 1024) * 100) / 100控制小数位，避免浮点误差（如1.999999999） - 区分 KB / MB / GB：超过 1024×1024×1024 才用 GB，别一概除以
1024**2 - 移动端 Safari 对大文件的
size读取是同步可靠的，不用加try/catch - 别用
console.log替代用户提示——没人盯着控制台看
e.target.value = '' 必须清空，否则重复选同个超限文件不触发 change
这是最常被忽略的操作。如果用户选了一个 10MB 文件，前端校验失败并提示后没清空 input 值，那他再次点击选择、再选同一个文件，change 事件根本不会触发——浏览器认为“没变化”。
必须显式重置：
-
e.target.value = ''是唯一可靠方式，input元素本身不支持.reset() - 不能只靠
removeEventListener或 DOM 重建，太重且易漏 - 清空后用户可重新选择其他文件，流程闭环
- 这个动作要放在所有校验逻辑之后、提示弹出之后，顺序错会导致提示闪一下就消失
显示位置和时机比代码更重要
用户不是开发者，他们不关心你用了 File API 还是 FormData。真正影响体验的是：文件一选中，大小是否立刻可见？超限时提示是否明确指向“这个文件太大”，而不是笼统说“上传失败”？
实操建议聚焦三点：
- 在
change回调里，立即更新一个<div id="file-info">，内容包含文件名 + 格式 + 大小（如 <code>report.pdf (1.2 MB)） - 超限时，提示文案带具体数值：
文件不能超过 5MB，当前 8.3 MB，别只说“超出限制” - 如果页面有多个上传入口（如头像、附件、封面），每个都应独立显示各自文件信息，不要共用一个提示框
- 别等上传开始后再显示大小——那时用户已失去修改机会
