江苏龙网

  1. 首页 > 人文 > >

@如何在Web端设计上传图片（2）：上传多张图片( 二 )


第二种是重限制 ， 重引导 ， 这种就是需要避免用户的操作对产品带来的影响 。
【@如何在Web端设计上传图片（2）：上传多张图片】低质量的图片是一个雷区 ， 若是越过这个雷区 ， 伤害的就不只是商户 ， 还会伤害到平台 。 像是特别低分辨率 完全无法兼容的格式 ， 不支持的尺寸 ， 这类图片的若是大量在平台上面出现 ， 就会让用户对平台失去好感 ， 认为平台质量不过关 。 所以通过限制不合规的图片、引导用户上传高质量图片 ， 来限制避免低质量的图片 ， 降低对平台质量的影响 。
例如淘宝的商品图片 ， 如果都是低质量的图片 ， 会让用户对平台的商品质量质疑 ， 所以对商品图片的分辨率 ， 格式等进行了限制 ， 避免了不合规的图片上传到平台中 。

@如何在Web端设计上传图片（2）：上传多张图片
本文插图
2. 上传图片中 ， 批量校验图片行为
支持用户上传多个图片 ， 由于这种会涉及到多文件的批量操作 ， 同一批文件中可能出现多个文件的图片格式、图片大小、图片数量等属性信息的校验 。 原则上 ， 相同属性的原因只提醒一次 ， 例如：有5个是非图片格式 ， 只提示一次图片格式即可 ， 不需要重复提示5次 。 错误的文件进行提示 ， 正确的文件直接展示即可 。
@如何在Web端设计上传图片（2）：上传多张图片
本文插图
验的优先级：先校验文件类型 ， 再校验文件大小 ， 最后才是图片的数量 。 比如最多只能上传9张图片 ， 如果一次选择了12张图片 ， 并且有非图片格式 ， 超过大小的文件 ， 那么这里的判断：就是过滤非图片格式的文件 ， 然后过滤超过图片大小的 ， 最后判断图片是否超过最大限制 ， 若是超过最大数量限制 ， 那么就展示科研容纳的图片 ， 多余的图片提示超过限制 ， 过滤不展示即可 。
此时图片已经上传满了 ， 页面上就没有添加图片的按钮了 。 只有删除图片之后 ， 才会多余的位置 。
@如何在Web端设计上传图片（2）：上传多张图片
本文插图
3. 多图上传的异常处理
经过前面的筛选图片、图片校验步骤 ， 多张图片选择好了之后 ， 再用户点击“发布”按钮的那一刻 ， 就是考验系统的时候了 。 由于是多图片的上传 ， 用户的信息比较多 ， 上传的时间会稍微久一点 ， 需要给用户一个上传中的状态提示 。
并行需要考虑网络出现状况的话 ， 比如网络超时导致上传失败 ， 那这种情况下该怎么处理 。
豆瓣在点击发布之后 ， 若是在网络不好的情况下 ， 它的处理方式就有些让人崩溃 ， 只是提示用户发送失败 ， 最重要的是刚刚编辑的内容并没有保存 ， 对于用户而言 ， 刚才耗时整理的内容没有保存 ， 需要重新来过 ， 这是很让用户崩溃的 。
我们先来看微信的处理方式：当你点击发布之后 ， 微信会直接跳到朋友圈的页面并把发布结果展示出来 ， 让用户直观看到最终的成果 ， 就算是在弱网的情况下 ， 微信也是采用这种逻辑处理方式 ， 制造一种“发布成功的假象” ， 用户自己看到发布成功 ， 在别人的朋友圈暂时还看不到 。 并且在网络好了之后 ， 后台会再次尝试 ， 直到发布成功 。
@如何在Web端设计上传图片（2）：上传多张图片
本文插图
4. 上传图片后 ， 多图的展示
图片上传成功之后 ， 就是需要关注图片发布的结果 ， 也是最终需要达到的诉求 。
如果图片发布成功了 ， 会根据图片的数量 ， 来进行图片的展示 。
方式1：:图片是重点信息 ， 上传多少张图 ， 就展示多少张 。
用户上传图片之后 ， 会根据上传了几张图片来展示效果 。


推荐阅读


上一篇：「环球Tech」2020如何登珠峰？中国移动5G＋VR“云登顶”

下一篇：【网易科技报道】周鸿祎卸任360金融董事长 由其助理洪兆接任