上传 Upload
用户在相册表单中选择一张本地照片,页面需要显示文件名、进度和上传完成结果。
前端与交互约 10 分钟 · 从真实需求理解
1为什么选择文件后还不能直接说上传成功?
创建旅行相册添加一张封面照片
照片旅行照片JPG/PNG · 最大 5MB
封面尚未选择照片
选择照片后,这里会显示文件名和上传状态。
Upload 把本地文件带入当前任务,但选择文件只是开始。页面还需要在同一入口附近显示文件名、传输进度和完成或失败结果,让用户知道系统是否真的接收了这份文件。
2Upload、Input 和 Link,什么时候不能互换?
3Upload 由哪些真实部分组成?
Upload 由哪些真实部分组成?
创建旅行相册添加一张封面照片
照片旅行照片JPG/PNG · 最大 5MB
封面尚未选择照片
选择照片后,这里会显示文件名和上传状态。
- 文件入口和选择动作:让用户把本地文件交给当前任务,并说明支持的类型。
- 文件名与状态:区分尚未选择、已选文件和已经完成。
- 进度与结果反馈:在传输过程中说明正在发生什么,失败时保留可恢复路径。
4Upload 的选择、处理中和完成
空入口
尚未选择文件
已选择
team-photo.jpg
上传中
team-photo.jpg
已完成
team-photo.jpg
Upload 的生命周期不是一个瞬间:空入口没有文件,已选择说明文件名已经进入本地状态,处理中代表传输还未结束,完成才代表当前任务可以继续使用文件。
5选择照片后,Upload 如何反馈传输结果?
旅行相册
upload创建旅行相册
添加一张封面照片。
旅行照片尚未选择照片
真实上传需要把“选中了文件”和“文件已完成”拆开:用户选择后立即看到文件名,传输中显示进度,完成或失败时保留清楚的下一步。
6什么时候该用 Upload?
系统需要读取并保存文件内容时,Upload 才是正确入口。
选择照片尚未选择文件
只保存文字说明时使用 Input,不启动文件选择和传输流程。
用户只需要打开已有文件时使用 Link,不要再次上传副本。
打开在线资源 点击后进入对应的页面或资源
什么时候用 Upload,要先判断用户是否要把本地文件带进当前任务;如果只是写文件名或打开已经在线存在的资源,就应如何换成 Input 或 Link。
7怎样把 Upload 需求告诉 Agent?
请在旅行相册表单实现 Upload:只接受 JPG/PNG,用户选择文件后先显示真实文件名,再显示上传中和进度,完成后明确标记“上传完成”;失败时保留文件和重试路径。请保留真实 file input、键盘可达的选择按钮、accept、状态消息和窄屏布局;不要把文件名 Input 或已有在线资源 Link 当成 Upload。
8不用背,看看你能不能判断
1 / 3
Upload 的“已选择文件”为什么不能直接等同于“上传完成”?
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。