SPT术语库

上传 Upload

用户在相册表单中选择一张本地照片,页面需要显示文件名、进度和上传完成结果。

前端与交互约 10 分钟 · 从真实需求理解

1为什么选择文件后还不能直接说上传成功?

创建旅行相册添加一张封面照片
照片
旅行照片JPG/PNG · 最大 5MB
封面
尚未选择照片

Upload 把本地文件带入当前任务,但选择文件只是开始。页面还需要在同一入口附近显示文件名、传输进度和完成或失败结果,让用户知道系统是否真的接收了这份文件。

2Upload、Input 和 Link,什么时候不能互换?

Upload ≠ InputLink:Upload 负责把文件内容带入当前系统,Input 负责接收文字,Link 负责把用户带到已经存在的资源。

  • 文件名出现在字段里只证明选中了文件,不证明服务器已经接收。
  • 如果资源已经有稳定 URL,链接比再次上传更符合用户任务。

验收时检查选择按钮、文件名、进度、成功/失败消息和重试边界是否在同一入口附近,并确认键盘可以到达真实 file input。

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 的“已选择文件”为什么不能直接等同于“上传完成”?

请选择一个最符合题意的答案

选择答案后自动进入下一题

社区延伸

看别人真实遇到过什么

社区帖子还没有关联到这个词条。