直接读 file.size 即可，无需发请求或依赖后端；onchange 中通过 event.target.files[0].size 获取字节大小，确保选中瞬间获取元信息，避免延迟。

直接读 file.size 就行，不需要发请求、不依赖后端，浏览器选中瞬间就能拿到。

onchange 里直接取 file.size

用户点选文件后，input[type="file"] 的 change 事件触发，此时 event.target.files[0] 已包含完整元信息。重点不是“怎么显示”，而是“别等 submit 或 upload 才读”——那会晚几秒，体验断层。

• files[0] 存在才读，否则是空数组或 undefined
• 大小单位别硬写 KB/MB 换算逻辑，先统一用字节（file.size），展示时再按需格式化
• IE10 及以下不支持 files API，但 2026 年基本可忽略

处理多文件时遍历 files 列表

带 multiple 属性的 input 会返回 FileList，它不是数组，但可用 for 或展开语法遍历：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

const files = event.target.files;
for (let i = 0; i 
<p>注意：不要用 <code>Array.from(files).map(...)</code> 做兼容性兜底——现代浏览器下没必要，反而引入冗余；真要兼容老环境，应单独判断 <code>files.length</code> 是否为 0。</p>

<h3>别混淆 size 和 blob.size</h3>
<p><code>file</code> 对象本身就有 <code>size</code> 属性，值为 number 类型，单位字节。有人误以为要 new Blob() 再读 <code>blob.size</code>，完全多余：</p>

• file.size === new Blob([file]).size 恒成立，但后者多一次内存拷贝
• file 是 Blob 的子类，天然继承 size 和 type
• 只有当你需要切片（slice()）或改类型时，才需显式构造 Blob

真正容易被忽略的是：某些低版本 Android WebView（如 4.4.x）对 file.lastModified 支持不全，但 size 全系稳定。只要不碰时间戳，这个字段就是最可靠、最轻量的实时文件大小来源。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！