【SpringMVC】仿空间说说照片上传

先看看实现效果，如果不是您需要的效果就不浪费您宝贵的时间了。代码地址

此需求适用于用户在提交包含多张图像信息的相关记录时， 前端页面中图像排版的一个相关显示。

一、实现思路 

如果只是上传单张图像，那么常规的上传流程应该是

1：用户（前端）选择需要上传的图像

2：后台（服务器端）接收前端发送的表单数据，将照片存入指定位置，再连同文本信息一起保存进数据库，上传文件的方式使用Apache 的fileupload插件，此类方法已经有很多了，不做赘述

3：后台将上传图像保存后将url返回至前端，在前端指定位置显示。

但如果是上传多张图像，参考qq空间发布说说选择照片时的流程

1：用户上传照片

2：后台接收，返回url，显示到指定位置

3：判断当前照片数量，进行默认排版，选择提交说说之前可返回1

同时，在用户提交说说之前，允许用户删除部分图片，然后返回步骤3

上传多张照片与上传单张照片最大的不同是无需考虑照片的排版和不用考虑删除已经选择的照片。

上述对上传多张照片只是做了简短的描述，详细的流程图如下

 关于九宫格排版的部分，我几乎完全借鉴了QQ空间说说的九宫格CSS，感兴趣的可以去看看空间源码（F12大法好）

 二、两点tips

1:关于input标签，我这里不显示文件名称，借鉴了https://blog.csdn.net/qq_32623363/article/details/80878408

2:图中显示的所有图片都是正方形，但是上传的图片可能是横（宽>高）型和竖（高>宽），解决方式是在img标签中设置width或height属性，但是不同类型的图片，要设置width还是height是不一样的，所以后台在给前端传url的同时还会告诉前端这张图片是长型还是宽型，具体可看代码中的js部分。

三、缺陷

1、我的这个demo只能显示少于或等于9张图片，超过9张未做处理

2、没有空间说说发布照片排版灵活，我只选取了九宫格的形式，但是说说发布可供选择的排版更多。