上传Upload
填写与选择把电脑或手机里的文件交给网页
也常被叫作文件上传上传控件
先知道
上传包含选择文件、传输和保存整个过程。选择前要说明类型、大小和数量限制，上传中显示进度，失败后允许重试；服务端仍要重新检查文件和权限。
⬆点击或拖拽文件到这里支持 JPG / PNG，不超过 10MB
📄66%
容易混淆？这样区分
什么时候用
- 拖拽上传：大文件直接拖进来，最顺手⬆ 把文件拖到这里，或点击选择
- 图片上传带预览：头像、封面，传完马上看到🖼🖼＋
- 文件列表 + 进度：多个文件各自的状态清清楚楚📄 需求文档.pdf✓📄 设计稿.fig66%
- 写清格式和大小限制：传之前就知道行不行⬆ 点击或拖拽上传支持 JPG / PNG，单个不超过 10MB
什么时候不用
- 用户手里只是个链接 → 用 输入框 Input 贴 URL视频链接⬆ 上传用户手里只有一个 URL，给个输入框就行
- 几十个小文件逐个传：先打包，或支持选文件夹🖼 IMG_001.jpg12 / 3838 个小文件逐个传，传到天荒地老
- 失败不给重试：传到 99% 失败只能从头再来📄 视频素材.mp4✕ 失败没有重试按钮，只能整个重传
- 不设大小上限：1.8GB 传半小时才报错🎬 成片-4K.mp4（1.8GB）99%传到 99% 才提示超出大小限制
组成结构 · Anatomy
⬆支持 JPG / PNG，不超过 10MB
📄设计稿.fig
1拖拽区Drop Zone虚线框，拖文件进来或点击选择
2限制说明Hint格式、大小上限，提前说清
3文件项File Item一个文件一行，可删除、可重试
4文件名File Name显示文件叫什么
5进度条Progress传到哪了一目了然
常见变体 · Variants
拖拽区Drag
⬆拖拽文件到这里或点击选择
大文件或一次传多个,拖进来最顺手
按钮触发Button
页面空间紧,一个按钮唤起选文件
图片卡片Picture
＋
传头像、封面,传完马上看到图
文件列表List
📄✓
📄66%
多个文件一起传,各自进度看得见
典型使用场景
上传头像
✎
头像
支持 JPG / PNG，不超过 2MB
提交附件
提交工单
🖼✓
📄66%
导入数据文件
批量导入成员
下载模板
⬆拖拽 Excel / CSV 到这里或点击选择文件，单次最多 500 行
发布配图
周末去爬了塘朗山，云海绝了 🌤
＋