在Web网页中常常遇见图片上传，上传图片的应用场景场景在个人信息中（比如：上传个人头像）、信息反馈（比如：淘宝的订单评价）、社交场景（比如：上传图片发朋友圈）。
我们了解图片的基本属性主要包括：图片的文件格式、图片大小、图片宽和高，以及图片数量。那下面就来看看，针对各种场景下的上传图片，该如何根据用户场景进行设计。
在很多网站中，常常会遇到上传单张图片，最典型的场景就是上传个人头像，这个属于个人信息补充的需求场景，该场景只允许上传一张图片。例如用户在网站注册之后，基本上都会通过个人中心在里面上传个人图片，设置一个用户喜欢的头像。
在很多社交网站中，常常为了促进用户的沟通，会鼓励用户上传个人头像。因为在社交场景中，个人头像比一个昵称更加让人能记住你。
上传个人头像是一个常见功能，但是对于头像的处理确实有很多方式的。常见的方式是上传一张高清的图片，但是显示的是缩略图。其次社交场景的上传图片用户更多趋向处理图片，比如对图片进行滤镜美颜，目的是通过头像吸引别人。还有一种上传头像之后，是用户精心挑选的满意的图片设置为自己的头像，支持再次点击头像，可以全屏显示原图。
（1）上传图片前，告诉用户图片规则
在新浪微博的个人主页，可以看到自己的图像，注册账号之后，都是提供一个默认的图片。后期是引导用户上传头像。
所以在用户没有上传过图像，系统使用默认图片，有一个很醒目的“上传头像”，去引导用户上传自己的头像。
用户点击“上传头像”之后，打开头像设置窗口。
在这个弹框中，首先就告知用户上传图片的规则：图片的格式和大小限制。在上传图片区域用文案提示：只支持JPG、PNG、GIF，大小不超过5M。
微博的头像设置这里，由于上传的图片，需要进行裁剪，所以右侧还提供了一个预览效果。由于微博的头像应用在3个地方：分别是个人页面的大尺寸头像、发表微博的中尺寸头像以及发表评价使用的小尺寸图像，三个地方都是不同的尺寸，所以这里的预览有3个不同尺寸的预览效果。
（2）在上传图片中，引导用户行为
1）图片的格式和大小校验
点击“选择图片”，弹出选择文件的窗口，web端支持自定义文件，可根据支持的图片类型，自定义文件的格式，只能选择符合规则的图片格式。
但是web端可以支持查看所有文件类型，若是上传其他类型的文件，系统会给予引导，告知用户规则。若是选择了支持的图片格式，但是超过文件大小，也是需要校验，告知用户支持上传图片的最大限制，引导用户上传范围内的图片。
校验的优先级：先校验文件类型，再校验文件大小，最后才是图片的高度和宽度。
2）图片的裁剪
满足校验之后，图片才会回显在图片框中，需要注意：
（3）上传图片后，展示信息
在用户上传图像之后因为此时用户上传图像之后，比对后续很多会修改，此时这个入口就不需要特别名称，只有鼠标移到图像上面，才会提醒用户：更换头像。
任何一种图片上传的方式，其实都是根据用户的需求、操作场景来设计的，让用户更加方便。看似一个简单的上传照片的功能却有很多种不同的设计方案，每个设计方案其实满足的就是用户的具体需求和场景。