上传Upload
你可能会说
用户要能把自己的图片传上来。
让用户从电脑或手机选择图片、视频或文档，并提交给当前网站或软件例如更换头像时，页面应先说明支持的格式和大小，选择图片后显示上传进度、成功或失败。网站后面的服务器仍要再次检查文件是否安全、格式是否正确。
先知道
也常被叫作文件上传上传控件
容易混淆？这样区分
什么时候用
- 拖拽上传：适合大文件或批量选择⬆ 把文件拖到这里，或点击选择
- 图片上传带预览：头像、封面，传完马上看到🖼🖼＋
- 文件列表 + 进度：多个文件各自的状态清清楚楚📄 需求文档.pdf✓📄 设计稿.fig66%
- 写清格式和大小限制：传之前就知道行不行⬆ 点击或拖拽上传支持 JPG / PNG，单个不超过 10MB
什么时候不用
- 用户只有文件链接：使用 输入框 Input 填写 URL视频链接⬆ 上传用户手里只有一个 URL，给个输入框就行
- 大量小文件逐个上传：先打包，或支持选择文件夹🖼 IMG_001.jpg12 / 38
- 失败不给重试：传到 99% 失败只能从头再来📄 视频素材.mp4✕ 失败缺少重试入口，失败后需要重新上传
- 不设大小上限：1.8GB 传半小时才报错🎬 成片-4K.mp4（1.8GB）99%传到 99% 才提示超出大小限制
组成结构 · Anatomy
⬆支持 JPG / PNG，不超过 10MB
📄设计稿.fig
虚线框，拖文件进来或点击选择
格式、大小上限，提前说清
一个文件一行，可删除、可重试
显示文件叫什么
传到哪了一目了然
常见变体 · Variants
拖拽区Drag
⬆拖拽文件到这里或点击选择
上传大文件或批量选择文件时
按钮触发Button
页面空间有限，使用按钮打开文件选择器
图片卡片Picture
＋
上传头像或封面时，需要展示已选图片
文件列表List
📄✓
📄66%
同时上传多个文件时，需要分别显示处理进度
典型使用场景
上传头像
✎
头像
支持 JPG / PNG，不超过 2MB
提交附件
提交工单
🖼✓
📄66%
导入数据文件
批量导入成员
下载模板
⬆拖拽 Excel / CSV 到这里或点击选择文件，单次最多 500 行
发布配图
周末去爬了塘朗山，云海绝了 🌤
＋
延伸阅读 · 权威出处