SpringMVC多图片上传 从前端(仿qq空间)到数据库图片地址存储

SpringMVC多图片上传 从前端(仿qq空间)到数据库地址存储

功能：限制图片最多可上传张数，类型，可以在页面上进行删除图片，可提交重复图片，点击提交时才会将所有图片进行上传(没有进行异步上传)；后端获取图片，并将图片地址以JSON形式存入数据库中；最后将存放在数据库中的图片地址取出，返回到页面上。

由于自己能力不足，参考了很多其他人写的一些demo才简陋的将其敲出来，可能存在一些错误，还望批评指正哈 >_<

图片选择、回显、提交

TIP: 和qq空间图片上传不是完全一样哦，是精简版的缩水版，根据个人感觉所写

    1. 上传代码HTML

页面没有美化，需要美化的自行优化ヾ(≧O≦)〃嗷~

<form id="imgForm" action="/#" method="post" enctype="multiple/form-data">
		<input multiple type="file" onchange="selectImage(this)" accept="image/gif,image/jpeg,image/x-png,image/png" />
		<!--图片预览列表-->
        <div class="file-list" style="position: relative;"></div>
        <input class="submitImg" type="button" value="上传" />
</form>

    2. 上传代码JS

2.1 . 定义全局变量

// 注意引入jquery.js
<script type="text/javascript" src="js/jquery.js"></script>

// 定义全局文件数组变量
var fileList = []; 
// 定义过滤非图片正则
var imgFilter = /^(image\/jpg|image\/jpeg|image\/gif|image\/png|image\/bmp|image\/tiff)$/i;

2.2 . 触发图片选择函数

// 用户一次选取的图片
function selectImage(imgFile){
   
  // 最多只允许添加9张图片
  if(fileList.length > 8 || imgFile.files.length > 8){
   
    alert("最多可以上传9张图片");
    return;
  }
  var currentFile = imgFile.files;
  for(var i = 0; i < currentFile.length; i++){
   
	 // 过滤非图片请求
	 if(!imgFilter.test(currentFile[i].type)) {
   
	   alert("文件格式必须为图片");
	   return;
	 }
	 // 对当前图片进行重命名(可以重复上传图片)
	 var upName = new File([currentFile[i]], new Date().getTime() + currentFile[i