编辑导读：附件上传是很多网站常见的一个基础功能，本文作者依据工作中项目实践的所思所想，从具体使用场景出发，结合案例等分享了B端产品中附件上传设计的相关流程，并对过程中需要注意的问题进行了介绍，希望对你有所启发。

一、引题

B端业务系统流程中，经常遇到需要把文件或者材料拿给别人确认或查看的情况。

举个例子：

如当销售人员签完合同后，需要对合同要素进行录入并上传合同附件，由业务相关人员根据合同内容进行业务配置相关的产品服务。如果不能上传附件的话，销售人员需要将合同原件通过钉钉发送或者邮寄的方式寄给业务人员，这个过程将会浪费很多的时间。

邮寄的方式：

• 问清楚业务人员的联系方式与地址（哪个分公司？由于人员流动性原因有可能过一段时间就换人了）；
• 通过手机选择一个快递公司；
• 输入收件地址与寄件地址，支付并下单；
• 将签署完的合同整理好，等待快递小哥上门取件；
• 快递小哥上门取件，打印快递单；
• 1天过去了；
• 2天过去了；
• 3天过去了；
• 业务人员收件，并根据合同内容进行后续操作流程。

钉钉的方式：

• 将签署完的合同拍照或者扫描，进行整理后；
• 在钉钉上找到业务人员，如果没有添加，还需进行添加，如果有，直接发送；
• 业务人员接收到合同文件，根据合同内容进行后续操作；
• 由于人员流动性原因，以及人的能动性。忘记保存在固定的文件中，合同扫描件可能会在交接过程中存在不完整的情况，导致系统上有的合同编号，没有合同扫描件或者合同照片。

以上流程中，可以看出：

• 在合同对接过程中效率不是很高。
• 由于人员流动原因，系统上存在的合同编号有时会找不到对应的合同原件，没有办法追溯到合同信息的准确性。

在涉及文件材料的场景中，附件上传功能，用户可以将材料文件上传到系统中，他人可以快速的进行浏览、查阅。这一过程也会变得很有效率。

二、如何设计附件上传功能？

用户在进行附件上传时，需要提前将上传的文件准备好，只需点击上传，选择文件就可以进行上传了，上传完成后，需要查看上传文件以及数量是否正确，如果正确，这个动作就完成了，如果不正确，就将不正确的文件删除重新上传就可以了。从上面的流程可以得出，附件上传的流程为：上传前——上传——上传中——上传后。

从上传流程中，可以大致得到附件上传的功能包含：上传（附件上传的入口）、上传中（附件上传的格式、附件上传的规则、附件上传的进度、文件上传异常处理）、上传后（附件上传成功或失败的提示、附件上传后的显示）

1. 附件上传的入口

其一：入口一定要明显，简洁。要让用户知道这是上传附件的入口，点击这个，就可以进行上传附件了。如下图所示：

其二：一定要让用户知道这个附件上传的是什么附件，一个页面信息非常多，用户如何知道这个附件是要上传的什么样的内容呢？比如下图，就让人一目了然，左边的图要上传的附件是参会材料，而右边的图上传的附件是合同附件。所以一个好的字段名称+一个上传附件的按钮是很重要的。

2. 附件上传的格式

可以根据业务需要对上传的附件格式进行约束，百度了附件格式有哪些：txt、pdf、doc、docx、xls、xlsx、ppt、pptx、rft、jpg、png、bmp、gif、jpeg、rar、zip、dat、key、msg、cad、btw、avi、rmvb、wps、et、dps、vsd、prn、mp4、ai、dib、ico、jfif、jpe…….

除了上面哪些还有很多，如果要是都满足的话肯定会需要花费大量的时间，所以为了节省开发成本，我们会对附件上传的格式进行限制。

其次在各个业务中，在财务薪酬体系中，需要excel格式的文件，如果我们不做限制的话，有的人用的其他的格式，对业务侧的统计人员来讲，对工作也会造成不小的麻烦，所以，为了提高业务效率，我们也要对附件上传的格式做限制。

证明类的场景中，比如：

上传凭证、身份证件上传、投诉证明的场景中，会采用图片的格式进行上传，常见的图片格式有：PNG、JPG。

协作类的场景中，比如：

在很多项目管理的软件中（worktile，TAPD）产品启动时，需要上传需求文档同步到研发以及团队其他小伙伴，进行后续开发事项。会议结束后，需要上传会议纪要，同步给相关人员，开展后续工作事宜。这些都会采用文档的格式进行上传，常见的文档格式有：txt,pdf,doc,docx,ppt

报表类（核对数据类）的场景中，比如：

每个月行政人员都需上传报销清单，财务会人员对报表进行核对。会采用表格的格式进行上传，常见的表格格式有：.xls

3. 附件上传的规则

3.1 上传附件件格式校验

为了提高业务效率，防止用户上传了错误格式的文件，以及节省开发成本。校验的第一步，是校验上传附件的格式是否正确。如果附件格式只支持PDF，而用户上传的了excel格式的文件，则不能上传。

3.2 上传附件内容校验

为了避免用户操作有误，上传了空的文件。格式校验无误后，再校验上传的文件内容是否为空。如果用户上传了内容为空的文件，则不能上传。

3.3 上传附件大小校验

一是为了减少服务器的储存空间，二是为了提高接受方的查看效率。内容不为空校验无误后，校验文件的大小。如果附件大小只支持5M，而用户上传的附件大小超过5M，则不能上传。常见的限制文件大小的场景有：发送邮件时上传的附件；参加某比赛需要上传的附件。

3.4 上传附件数量校验

根据业务需求进行校验，附件是否允许上传多条。如果上传附件只支持一份，而用户上传多份则不能上传。

3.5 上传同一附件校验

文件上传后，同一文件多次进行上传，需对多份同一文件进行编号，便于用户区分。

4. 附件上传其他功能点

4.1 上传中附件进度显示

当文件上传校验成功，进入上传时。需要给用户一个上传中的提示，让用户知道附件正在上传中，上传进度的显示能够让用户知道文件还需要多久能够上传完成，给用户一个预期时间。

4.2 删除附件

当用户在上传中、上传后，发现自己上传了错误的文件，需要对文件进行删除，重新上传，这样一方面是为了避免用户上传不正确的文件，纠正用户的错误。另外一方面删除错误文件也是为了避免占用储存空间。

4.3 附件上传过程中，可进行页面其他操作

在上传附件过程中，如果上传的文件过大，需要等几分钟时，用户可以在页面完善其他内容，而不是等文件上传完才能进行操作，这样是为了提高用户的效率。如果没有其他内容需要完善，也可以点击保存或者提交，等附件上传成功后，自动保存附件数据。

4.4 续传附件

当文件因为其他原因（断网，或者超时）中断上传时，可以点击续传，继续上传未完成的附件上传。可以节省用户时间，避免重新打开文件上传。

注意：文件上传过程中如果因为其他原因中断上传，比如：修改了文件的名称、删除文件及文件所在的文件夹、修改文件格式等情况，需要用户删除附件重新上传。

4.5 附件上传后显示

附件上传后的显示，是为了能够让文件的接收者能够快速的浏览文件，所以一个清晰明了的文件名称是非常重要的。

根据文件的大小判断是选择在线浏览还是下载至本地后进行查看，所以文件的大小需要进行展示。

4.6 附件反馈提示

让用户知道文件上传是否成功还是失败，如果上传失败，用户需要重新进行上传，如果上传成功，用户可以去做其他的事情

三、总结

附件上传功能能够提高文件触达的效率，提高业务人员工作的效率。在设计附件上传的功能时，需要根据不同业务需求，对附件进行设计，旨在提高研发成本与业务效率。

本文由 @? 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。