多图上传--FormData表单&Java，SSM

一.前端

1.html

 <form id="B_bannerForm" name="B_bannerForm" method="post"  enctype="multipart/form-data">
<table  style="font-size:17px;">

<td align="right">轮播图:</td>
                <td >
                <div id="bannerDiv" style="width:100%;">
</div>
                <input id="bannerPic" type="file" name="bannerPic" style="width:163px;" />
                </td>
                </tr> 
<tr id="pic2">
                <td align="right">详情图:</td>
                <td>
                <div id="bannerDiv2" style="width:100%;">
</div>
                <input id="bannerPic2" type="file" name="bannerPic2" style="width:163px;" />
                </td>
                </tr> 

  </table>
 </form>

2.JS

//获取上传文件

var files = document.getElementById("bannerPic").files[0];

var files2 = document.getElementById("bannerPic2").files[0];

// 构造JS的Image对象

var img =new Image();

var nameUrl =null;

var url =null;

nameUrl = document.getElementById("bannerPic").files[0];

url = window.URL.createObjectURL(document

.getElementById("bannerPic").files[0]);

img.src = url;

img.onload = function() {

var formData =new FormData();

if (files !=undefined) {

formData.append("bannerPic", files);

}

if(files2 !=undefined){

formData.append("bannerPic", files2);

}

//ajax提交

$.ajax({

type : "post",

contentType : "application/json",

url : " ",

async : false,

cache : false,

contentType : false,

processData : false,

data : formData,

success : function(data) {

},

error : function(XMLHttpRequest, textStatus,

errorThrown) {

console.log("error:" + XMLHttpRequest +" "

+ textStatus + " " + errorThrown);

}

});

}

二.后端

1.controller

参数：

@RequestParam Map<String, Object> param,

HttpServletRequest httpServletRequest,

@RequestParam(value = "bannerPic", required = true) MultipartFile[] bannerPics

2.service

String  templateurl= httpServletRequest.getSession().getServletContext().

getRealPath(File.separator);

String temp[] =templateurl.split("webapps");

File file = new File(realPath);

Boolean isCreate = false;

if (!file.exists() && !file.isDirectory()) {

isCreate = file.mkdirs();

}

else {

isCreate = true;

 = templateurl.split("webapps");

String realPath = null;

for (MultipartFile bannerPic : bannerPics) {

if (isCreate) {

if (file != null) {

String fileName = bannerPic.getOriginalFilename();

if (fileName.trim() != "") {

// 后缀名

String suffixFileName = fileName.substring(fileName.lastIndexOf('.'), fileName.length());

// 重命名上传后的文件名

StringBuffer updataFileName = new StringBuffer();

updataFileName.append(suffixFileName);

// 定义上传路径

String path = null;

File localFile = new File(path);

//上传 bannerPic.transferTo(localFile);

}}}}