springMVC+ajax文件上传

客户端代码：

HTML：

<div style="width: 100%;height: 100vh;position: relative;">
	<div id="upBox">
		<div id="inputBox"><input type="file" title="请选择图片" id="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG"/>点击选择图片</div>
		 <div id="imgBox"></div>
		 <button id="btn">上传</button>
	</div>
</div>
<script>
imgUpload({
	inputId:'file', //input框id
	imgBox:'imgBox', //图片容器id
	buttonId:'btn', //提交按钮id
	upUrl:'/file/upload',  //提交地址
	data:'myFiles' //参数名
});
</script>

js:

var imgSrc = []; //图片路径
var imgFile = []; //文件流
var imgName = []; //图片名字
//选择图片
function imgUpload(obj) {
	var oInput = '#' + obj.inputId;
	var imgBox = '#' + obj.imgBox;
	var btn = '#' + obj.buttonId;
	$(oInput).on("change", function() {
		var fileImg = $(oInput)[0];
		var fileList = fileImg.files;
		for(var i = 0; i < fileList.length; i++) {
			var imgSrcI = getObjectURL(fileList[i]);
			imgName.push(fileList[i].name);
			imgSrc.push(imgSrcI);
			imgFile.push(fileList[i]);
		}
		addNewContent(imgBox);
	});
	$(btn).on('click', function() {
		var data = new FormData();
		for (var i = 0; i < imgFile.length; i++) {
			data.append(obj.data, imgFile[i]);
		}
		submitPicture(obj.upUrl, data);
	});
}
//图片展示
function addNewContent(obj) {
	$(imgBox).html("");
	for(var a = 0; a < imgSrc.length; a++) {
		var oldBox = $(obj).html();
		$(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src='
				+ imgSrc[a] + ' οnclick="imgDisplay(this)"><p οnclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');
	}
}
//删除
function removeImg(obj, index) {
	imgSrc.splice(index, 1);
	imgFile.splice(index, 1);
	imgName.splice(index, 1);
	var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
	addNewContent(boxId);
}
//上传(将文件流数组传到后台)
function submitPicture(url,data) {
	console.log(data);
	alert('请打开控制台查看传递参数！');
	if(url&&data){
		$.ajax({
			type: "post",
			url: url,
			async: true,
			data: data,
			processData:false,//用于对data参数进行序列化处理 这里必须false
			cache: false,//上传文件无需缓存
			contentType: false, //必须
			success: function(dat) {
				console.log(dat);
			}
		});
	}
}
//图片灯箱
function imgDisplay(obj) {
	var src = $(obj).attr("src");
	var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src='
		+ src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" οnclick="closePicture(this)">×</p></div>'
	$('body').append(imgHtml);
}
//关闭
function closePicture(obj) {
	$(obj).parent("div").remove();
}

//图片预览路径
function getObjectURL(file) {
	var url = null;
	if(window.createObjectURL != undefined) { // basic
		url = window.createObjectURL(file);
	} else if(window.URL != undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file);
	} else if(window.webkitURL != undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file);
	}
	return url;
}

css:

* {
	margin: 0;
	padding: 0;
}

#upBox {
	text-align: center;
	width: 500px;
	padding: 20px;
	border: 1px solid #666;
	margin: auto;
	margin-top: 150px;
	margin-bottom: 200px;
	position: relative;
	border-radius: 10px;
}

#inputBox {
	width: 100%;
	height: 40px;
	border: 1px solid cornflowerblue;
	color: cornflowerblue;
	border-radius: 20px;
	position: relative;
	text-align: center;
	line-height: 40px;
	overflow: hidden;
	font-size: 16px;
}

#inputBox input {
	width: 114%;
	height: 40px;
	opacity: 0;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: -14%;
}

#imgBox {
	text-align: left;
}

.imgContainer {
	display: inline-block;
	width: 32%;
	height: 150px;
	margin-left: 1%;
	border: 1px solid #666666;
	position: relative;
	margin-top: 30px;
	box-sizing: border-box;
}

.imgContainer img {
	width: 100%;
	height: 150px;
	cursor: pointer;
}

.imgContainer p {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 30px;
	background: black;
	text-align: center;
	line-height: 30px;
	color: white;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	display: none;
}

.imgContainer:hover p {
	display: block;
}

#btn {
	outline: none;
	width: 100px;
	height: 30px;
	background: cornflowerblue;
	border: 1px solid cornflowerblue;
	color: white;
	cursor: pointer;
	margin-top: 30px;
	border-radius: 5px;
}

服务端代码：

@RequestMapping("file/upload")
public void fileUpload(HttpServletRequest request, HttpServletResponse response, MultipartFile[] myFiles) {
	try {
		Map<String, Object> map = FileUploadAndDownloadUtil.fileUpload(myFiles, "config/upload");
		DataUtil.writeToClient(map.toString(), response);
	} catch (IOException e) {
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("message", "上传失败，请重试");
		DataUtil.writeToClient(map.toString(), response);
		e.printStackTrace();
	}
}