换头像、传附件、提交封面图——单个或少量、可在浏览器里完成校验和传输的文件。
把一个文件从选择送到删除
上传不是「选完就完事」。在下面队列里加入模拟文件，看校验、进度、成功、失败、重试和移除怎样分别落在文件行上——遮住底部说明，行本身仍能讲清状态。
你在给团队后台换头像。真实页面里点击下面区域会弹出系统文件选择框；这里用三个模拟文件， 方便你观察 选择 → 校验 → 上传 → 成功 / 失败 → 移除 的完整状态。所有限制、进度和结果 都长在文件行上，不只靠底部说明。
点击或把文件拖到这块区域限 JPG / PNG · 单个 ≤ 2 MB · 真实页面弹文件选择框
队列为空。点上面的模拟文件加入一个，看它的状态怎么变。
原因：上传从选择文件开始。真实页面里点击下面的区域会弹出系统文件选择框；这里用三个模拟文件，方便观察完整状态。下一步：点一个模拟文件加入队列：JPG 通过校验，PNG 超大，PDF 格式不支持。对照：校验失败的文件会停在队列里标出原因，不进入传输；通过的才点亮「开始上传」。
面板里刚走过的五件事
上面队列反复出现的五件事，命名一下。
- 限制写在操作之前：格式、大小、数量在投放区就标清，别等用户选完才告诉他不行。
- 本地先校验：格式或大小不通过的文件停在队列里标原因，不进入传输。
- 进度可见、禁用重复提交：上传中每一行有墨色进度条，主按钮禁用，防止用户连点。
- 失败说原因 + 可重试：网络失败写明「网络错误」并给「重试」，不只弹「出错了」。
- 成功后可预览 / 移除：上传完成行变「已上传」，能预览或清出队列。
什么时候用它
看到「要把本地文件交给服务端」这条信号时用；只是给链接或粘贴文本时不必套上传。
只需贴个链接、纯文本粘贴，或单个文件极大（数百 MB 以上）要走分片 / 断点续传时，改用专用方案。
怎么用对，避开三个坑
从选择到获得判断的最短路径，并保留可恢复的状态。
- 用原生
<input type="file" accept>触发选择，把限制同时写在投放区文案和accept上，别只靠其一。 - 选择后在客户端先校验格式与大小（
file.type/file.size），不通过的标原因、不进入传输。 - 上传中显示进度（
XMLHttpRequest的progress事件或fetch+ 流），并禁用提交按钮；失败给具体原因和「重试」。 - 成功后提供预览或下载，并允许移除；移除要同时清掉界面状态和服务端已收到的临时文件。
正反例：同一个换头像
目标都是「把头像传上去」。差异在用户能否看到进度、原因和重试。
选 avatar.jpg 后立刻校验格式与大小；上传中显示墨色进度并禁用主按钮；成功后行变「已上传」可移除， 失败时写明「网络错误」并提供「重试」。
差异：每个状态都长在文件行上，用户知道卡在哪、下一步做什么。选完文件只剩一个 spinner，看不出走到哪；失败只弹「出错了」，用户不知道是太大、格式不对还是网络断， 也无法重试，只能重选。
差异：只改一处——把进度、原因和重试全删掉，上传就从可控变成黑盒。快速自测
用户上传一张 5 MB 的头像，客户端没校验，服务端最后才返回「太大」。最该改的是？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。