一、SSM+Form 多张图片和其他数据一起上传，
1、导包:
commons-fileupload-1.3.3.jar
commons-io-2.4.jar
2、springmvc.xml 文件配置
<!--文件上传，id必须设置为multipartResolver-->
<bean>
<!--设置上传大小 单位：B-->
<property value="10240000"></property>
</bean>
3、后端设置
@RequestMapping(value = "/upload.do")
public String updateItem(MultipartFile[] pictureFile,User user,HttpServletRequest request) throws IOException {
//图片上传 //设置图片名称，名称不能重复，可以使用uuid
String picName = UUID.randomUUID().toString().replace("-","");
System.out.println("传入图片的数量："+pictureFile.length);
System.out.println("传入其他的参数或者实体："+user);
//获取文件名
String oriName = pictureFile[0].getOriginalFilename();
System.out.println("获取文件名 "+oriName);
//获取图片后缀
String extName = oriName.substring(oriName.lastIndexOf("."));
System.out.println("获取图片后缀"+extName);
String path = request.getSession().getServletContext().getRealPath("image");
System.out.println("图片路径"+path);
File dir = new File(path,picName+extName);
if(!dir.exists()){
dir.mkdirs();
}
//开始上传
pictureFile[0].transferTo(dir);
return "forward:/index.html";
}
4、前端页面配置
<form enctype="multipart/form-data" method="post" action="upload.action">
文件：<input type="file" multiple/>
姓名：<input type="text"/>
密码：<input type="text">
<input type="submit" value="上传"/>
</form>
二、SSM+AJAX 多张图片和其他数据一起上传，总共四个步骤:
1、导包：
同上。
2、springmvc.xml 文件配置
同上。
3、controller 后台设置
@RequestMapping(value = "/upload.do")
public String updateItem(@RequestParam("pictureFile") MultipartFile[] pictureFile,User user,HttpServletRequest request) throws IOException {
//图片上传 //设置图片名称，名称不能重复，可以使用uuid
String picName = UUID.randomUUID().toString().replace("-","");
System.out.println("传入图片的数量："+pictureFile.length);
System.out.println("传入其他的参数或者实体："+user);
//获取文件名
String oriName = pictureFile[0].getOriginalFilename();
System.out.println("获取文件名 "+oriName);
//获取图片后缀
String extName = oriName.substring(oriName.lastIndexOf("."));
System.out.println("获取图片后缀"+extName);
String path = request.getSession().getServletContext().getRealPath("image");
System.out.println("图片路径"+path);
File dir = new File(path,picName+extName);
if(!dir.exists()){
dir.mkdirs();
}
//开始上传
pictureFile[0].transferTo(dir);
return "forward:/index.html";
}
4、前端页面配置:
文件:<input type="file" multiple/>
姓名:<input type="text"/>
密码：<input type="text">
<input type="submit" value="上传"/>
js部分
<script type="text/javascript">
function shangchuan() {
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
var filesl = document.getElementsByName("pictureFile")[0].files;
var files = document.getElementsByName("pictureFile")[0];
var formData = new FormData();
for(var i=0;i < filesl.length;i++){
formData.append("pictureFile",files.files[i]);
}
formData.append("username", username);
formData.append("password", password);
console.log(formData)
$.ajax({
url:"upload.action",
type:"post",
data:formData,
dataType:"json",
mimeType: "multipart/form-data",
cache:false,
processData:false,
contentType:false,
async:false,
success:function(data){
console.log(data)
}
})
至此两种方式配置结束，form表单形式更容易实现，也比较常用，推荐使用这种，希望能帮助到你！