前台代码 
<div>
		<form id="formdata" method="post" enctype="multipart/form-data">
			<div id="upload" class="btn btn-primary">选择图片</div>
			<div class="btn btn-success" id="uploadImg">上传</div>
			<div class="gallery" id="gallery"></div>
		</form>
		<input id="file" type="file" multiple style="display: none">
</div>
                   
                   
jquery代码
var files = new Array();
		var id = 0;
		//选择图片按钮隐藏input[file]
		$("#upload").click(function() {
			$("#file").trigger("click");
		});
		//选择图片
		$("#file").change(function() {
			//获取所有图片
			var img = document.getElementById("file").files;
			//遍历
			for (var i = 0; i < img.length; i++) {
				//得到图片
				var file = img[i];
				//把图片存到数组中
				files[id] = file;
				id++;
				//获取图片路径
				var url = URL.createObjectURL(file);
				//创建img
				var box = document.createElement("img");
				box.setAttribute("src", url);
				box.className = 'img';
				//创建div
				var imgBox = document.createElement("div");
				imgBox.style.display = 'inline-block';
				imgBox.className = 'img-item';
				//创建span
				var deleteIcon = document.createElement("span");
				deleteIcon.className = 'delete';
				deleteIcon.innerText = 'x';
				//把图片名绑定到data里面
				deleteIcon.id = img[i].name;
				//把img和span加入到div中
				imgBox.appendChild(deleteIcon);
				imgBox.appendChild(box);
				//获取id=gallery的div
				var body = document.getElementsByClassName("gallery")[0];
				body.appendChild(imgBox);
				//点击span事件
				$(deleteIcon).click(function() {
					//获取data中的图片名
					var filename = $(this).attr('id');
					alert(filename);
					//删除父节点
					$(this).parent().remove();
					var fileList = Array.from(files);
					//遍历数组
					for (var j = 0; j < fileList.length; j++) {
						//通过图片名判断图片在数组中的位置然后删除
						alert(fileList[j].name+"111");
						if (fileList[j].name == filename) {
							fileList.splice(j, 1);
							id--;
							break;
						}
					}
					files = fileList;
				});
			}
		});
		//上传功能
		$("#uploadImg").click(
				function() {
					//创建FormData根据form
					var uploadFile = new FormData($("#formdata")[0]);
					//遍历图片数组把图片添加到FormData中
					for (var i = 0; i < files.length; i++) {
						uploadFile.append("imgs", files[i]);
						alert(files[i].name);
					}
					if ("undefined" != typeof (uploadFile) && uploadFile != null && uploadFile != "") {
						//通过ajax上传
						$.ajax({
							url : basePath + "/uplocadImages/uplocadImage.do",
							type : "post",
							data : uploadFile, //把FormData作为参数
							contentType : false, //不设置内容类型
							processData : false, //不处理数据
							success : function(data) {
								if (data) {
									alert("上传成功!");
									window.location.reload();
								} else {
									alert("上传失败!");
								}
							},
							error : function() {
								alert("上传失败！");
							}
						});
					}
				});	
后台controller代码
@PostMapping("addPic")
@ResponseBody
public String addPic(MultipartFile[] imgs, HttpServletRequest request) throws IOException
{
    String fileName=null;
    for (int i = 0;i < imgs.length;i++) {
        String ext = FilenameUtils.getExtension(imgs[i].getOriginalFilename());
        fileName = UUID.randomUUID()+"."+ext;
        String realPath = request.getServletContext().getRealPath("/WEB-INF/web/foodCircle/uploadImages"+"/"+fileName);
        File file = new File(realPath);
        imgs[i].transferTo(file);
        fileName=fileName+","+fileName;
        return fileName;
    }
    return null;
}


利用返回的字符串用“，”分割然后遍历
var picname=data.split(",")
for(var i in picname){
    alert(picname[i])
   
}
利用取回得 picname[i]
（后台照片存的名字） 添加到上面前台代码中利用form表单提交存到数据库