网上看到很多Spring的多文件上传解决方案都是在页面里写上多个input，这样并不能符合客户的要求，用户需要一个输入框内，选择多个文件直接上传。下面就是完美解决方案：
一、Spring后台
正常的文件上传配置就不贴出来了，很简单的
@RequestMapping(value = "/park/pics/{id}", method = RequestMethod.POST)
@ResponseBody
@RequestLog(permission = "perparkupdate")//本系统作操作记录用的
public Object uploadPics(MultipartFile[] uploadFiles, @PathVariable("id") int id, HttpServletRequest request) {
Map map = new HashMap<>();
//文件保存的目录
String dir = "park_pic";
String requestId = (String) request.getAttribute("requestId");
//本系统里是和园区绑定
Park park = parkService.find(id);
for(MultipartFile uploadFile:uploadFiles){
String filename = uploadFile.getOriginalFilename();// 获取文件名
String title = filename;
String type = filename.substring(filename.lastIndexOf("."));
//......
//这是做保存文件的操作
fileService.upload(uploadFile, dir, cur+type, request);
}
//操作记录
fateRequestService.update(requestId, "批量上传园区实景", false);
map.put(Constants.SUCCESS, true);
return map;
}二、页面
（1）html
重点在于，添加input上添加multiple="multiple"
(2)js
JQuery请求比单文件上传多了processData : false, contentType : false,两个参数；需要手动把file文件列出来，组成formData，传递到ajax中。
$("#files").change(function () {
formData = new FormData();
formData.append("uploadType", 1);//这是我系统里的参数
var files = $(this)[0].files;
for( var i=0;i<files.length;i++ ){
formData.append("uploadFiles", files[i]);//列出文件
}
multiUpload(formData);
});
function multiUpload(formData) {
$.ajax({
url: "park/pics/"+$("#id").val(),
type: 'post',
dataType: 'json',
data: formData,
processData : false, //必须false才会自动加上正确的Content-Type
contentType : false,
success: function (data) {
if (data.success) {
location.reload();
} else {
}
},
error: function (data) {
response_error(data);
}
});
}三、总结
最终的表单数据其实和页面中放多个input是相同的，只不过，幻幻通过JS处理，把模拟的操作隐藏了起来，让用户看起来就是一个文件选择框里选了多个文件一起上传了一样。