网站设计图片上传 第1篇
但是web端可以支持查看所有文件类型，若是上传其他类型的文件，系统会给予引导，告知用户规则。若是选择了支持的图片格式，但是超过文件大小，也是需要校验，告知用户支持上传图片的最大限制，引导用户上传范围内的图片。
校验的优先级：先校验文件类型，再校验文件大小，最后才是图片的高度和宽度。
网站设计图片上传 第2篇
满足校验之后，图片才会回显在图片框中，需要注意：
3. 上传图片后，展示信息
在用户上传图像之后因为此时用户上传图像之后，比对后续很多会修改，此时这个入口就不需要特别名称，只有鼠标移到图像上面，才会提醒用户：更换头像。
任何一种图片上传的方式，其实都是根据用户的需求、操作场景来设计的，让用户更加方便。看似一个简单的上传照片的功能却有很多种不同的设计方案，每个设计方案其实满足的就是用户的具体需求和场景。
题图来自Unsplash，基于CC0协议。
网站设计图片上传 第3篇
支持用户上传多个图片，由于这种会涉及到多文件的批量操作，同一批文件中可能出现多个文件的图片格式、图片大小、图片数量等属性信息的校验。原则上，相同属性的原因只提醒一次，例如：有5个是非图片格式，只提示一次图片格式即可，不需要重复提示5次。错误的文件进行提示，正确的文件直接展示即可。
验的优先级：先校验文件类型，再校验文件大小，最后才是图片的数量。比如最多只能上传9张图片，如果一次选择了12张图片，并且有非图片格式，超过大小的文件，那么这里的判断：就是过滤非图片格式的文件，然后过滤超过图片大小的，最后判断图片是否超过最大限制，若是超过最大数量限制，那么就展示科研容纳的图片，多余的图片提示超过限制，过滤不展示即可。
此时图片已经上传满了，页面上就没有添加图片的按钮了。只有删除图片之后，才会多余的位置。
网站设计图片上传 第4篇
（1）告诉用户可上传多张
在微博中鼓励用户若有什么新鲜事想告诉大家，所以发布信息的入口在页面顶部。可以及时把新鲜的事情通过文字+图片的方式传递给公众。
首先，系统需要告知用户，这里可以上传多张图片。
微博在初次上传图片的时候，并没有提醒用户，可能是因为微博的发布新鲜事情功能对于用户而言使用的已经非常多了，不需要重点去引导。
但是如果用户不是特别熟悉的情况下，在上传图片前，还是需要告诉用户支持上传多个图片的信息。例如下面豆瓣的文案提示：按住ctrl键可最多选中9张，并且还支持拖拽图片到框里的方式来上传图片。
通常上传多张图片时，需要借助快捷键来选择。ctrl键和Shift键都可以同时选择多张图片，但它们之间也有不同之处，使用的场景是不一样的。
按住Ctrl键选择多图上传，选择的是多张不连续的图片。这种方法适合于上传不连续的多张图片。
shift键也可以同时上传多张图片，选择的是多张连续的图片。但多张连续图片是以其中一张为基础向上或是向下的连续选择。
（2）告诉用户上传图片的数量限制
图片支持上传多张，那么最多支持上传多少张，这个信息也是需要告知给用户。
上面豆瓣上传图片的案例中，已经通过文案直接提示：按住ctrl键可最多选中9张。
还有一种方式，把图片的“坑位”都展示出来，这样就很容易看出来，是可以传多张图的。但是这种做法一般会用于这种规则下：
（3）图片的宽度和高度校验
有时候上传图片还需要考虑图片的宽度和高度的校验，比如系统的logo，为了保证效果，需要限制图片的高度和宽度，防止质量过差或者过大的图片上传，因为拉伸、缩放、模糊等因素影响平台整体的视觉效果。这里有2种方式：
第一种是轻限制，重引导，为了更灵活支持用户的使用场景。
不是所有的logo图对高度和宽度进行限制，更好的方式是对用户提供更多的建议和引导，而不是强制限制。上传图片是用户的一个主动行为，用户在上传后预览时，可以很主观的去判断是否决定使用这张模糊或者质量不高的图片。
第二种是重限制，重引导，这种就是需要避免用户的操作对产品带来的影响。
低质量的图片是一个雷区，若是越过这个雷区，伤害的就不只是商户，还会伤害到平台。像是特别低分辨率 完全无法兼容的格式，不支持的尺寸，这类图片的若是大量在平台上面出现，就会让用户对平台失去好感，认为平台质量不过关。所以通过限制不合规的图片、引导用户上传高质量图片，来限制避免低质量的图片，降低对平台质量的影响。
例如淘宝的商品图片，如果都是低质量的图片，会让用户对平台的商品质量质疑，所以对商品图片的分辨率，格式等进行了限制，避免了不合规的图片上传到平台中。