js前端formData技术，后端MultipartFile的单文件多文件上传
单文件上传
1. html/jsp页面
<div>
<ul>
<li style="width: 100%;">
<label>工会会员登记表<em>*</em></label>
<form id="uploadtest" enctype="multipart/form-data" method="post" action="#">
<input type="file" name="file" accept=".xls,.xlsx">
<label class="error">请上传会员登记表</label>
<button class="input_upload" type="button" onclick="doupload(uploadtest)">上传登记表</button>
</form>
</li>
</ul>
<ul>
<li style="width: 100%;">
<label>筹备组名单<em>*</em></label>
<form id="uploadtest2" enctype="multipart/form-data" method="post" action="#">
<input type="file" name="file" class="fileinput" accept=".xls,.xlsx">
<label class="error">请上传筹备组名单</label>
<button class="input_upload" type="button" onclick="doupload(uploadtest2)">上传名单表</button>
</form>
</li>
</ul>
</div>
上面注意form表单的enctype=“multipart/form-data” method=“post”，input的type=“file” name=“file” ,这里type="file"表明这个input是上传文件用不是文本输入框，name="file"是要与java后端的MultipartFile的参数一致，如:
public void upload(@RequestParam(“file”) MultipartFile file){…}
2. jquery 前端
function doupload(id) {
var dd=null;
//var formData = new FormData($( "#"+id )[0]);
var form = document.getElementById(id);
// 用表单来初始化
var formData = new FormData(form);
$.ajax({
url: "/system/oss/upload",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
dd=data;
},
error: function (data) {
layer.msg(data);
}
});
return dd;
}
注意事项：比一般的异步ajax多了几项内容，
cache: false,
contentType: false,
processData: false,
3、java后端–MultipartFile
public String upload(@RequestParam("file") MultipartFile file,HttpServletRequest request) throws Exception {
if (file.isEmpty()) {
throw new OssException("上传文件不能为空");
}
// 上传文件
String fileName = file.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf("."));
//request.getSession().getServletContext() 获取的是Servlet容器对象，相当于tomcat容器了。getRealPath("/") 获取实际路径，“/”指代项目根目录，所以代码返回的是项目在容器中的实际发布运行的根路径
String realPath = request.getSession().getServletContext().getRealPath("/"); // 自定义的文件名称
String trueFileName = String.valueOf(System.currentTimeMillis()) + fileName; // 设置存放图片文件的路径,这里在工程的webapp下新建一个upload的目录存放上传文件
String path = realPath +"/upload/"+trueFileName;
System.out.println("存放图片文件的路径:" + path); // 转存文件到指定的路径
file.transferTo(new File(path));
System.out.println("文件成功上传到指定目录下");
}
注意事项：@RequestParam(“file”) 的file必须是HTML页面input框中name的值
多文件上传
1、html页面
<div class="infoenter user_form">
<ul>
<li style="width: 100%;">
<label>开会小视频<em>*</em></label>
<form id="uploadtest5" enctype="multipart/form-data" method="post" action="/system/oss/uploads">
<input type="file" id="videoMeeting" name="files" class="fileinput" multiple/>
<input type="submit" value="上传">
</form>
</li>
</ul>
<ul>
<li style="width: 100%;">
<label>开会照片<em>*</em></label>
<form id="upBox" enctype="multipart/form-data" method="post" action="#" style="width: 800px">
<input type="file" name="files" title="请选择图片" id="photoMeeting" multiple accept="image/jpg,image/JPEG" />
<input type="button" onclick="douploads(photoMeeting)">
</form>
</li>
</ul>
</div>
注意1：上传视频的那个是用submit方式提交的，下面的开会照片是用ajax提交，submit方式我没有测试
注意2：input 的name=“files”，增加了input的属性multiple 属性规定输入字段可选择多个值。
如果使用该属性，则字段可接受多个值，即这里可以多选文件上传啦
2、jquery针对于ajax提交
function douploads(id) {
var dd=null;
var fd=new FormData();
for(var i=0;i<$("#"+id)[0].files.length;i++){
fd.append("files",$("#"+id)[0].files[i]);
}
$.ajax({
url: "/system/oss/uploads",
type: 'POST',
data: fd,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
dd=data;
},
error: function (data) {
layer.msg(data);
}
});
return dd;
}
注意：这里的id是指input框的id,不是单文件上传时的form表单id,上面的for循环遍历了上传的多文件；
这里增加一个小知识：
① FormData的附加是通过append来进行的，删除是通过delete；FormData也可认为是上传文件的form表单序列化
例如：
附加：
data.append(“yzm”,yzm);
删除：
data.delete(“yzm”);
② 平常无文件上传的form表单序列化是用serializeArray；
例：var data = $("#user_form1").serializeArray();
data.push({“name”: “createTime”, “value”: time});
上面的意思就是将一个表单id=user_form1的form值序列化，序列化后的值data可以直接通过ajax提交到后台，form表单中input框的name值要与后台准备接受的实体字段相对应，实体字段可以多，比如实体中有"createTime"字段，form表单没有，可以直接序列化提交，也可以通过给序列化后的data再次附加值，serializeArray的附加用的是push ：
var config = {
url: "/portal/tbenterpriseuser/UpdateBaseInfor",
type: "post",
dataType: "json",
data: data,
success: function(result) {
if (result.code == web_status.SUCCESS) {
if(result.msg=="4"){
layer.msg(result.data)
}else if(result.msg=="5"){
layer.msg(result.data)
}} else if (result.code == web_status.WARNING) {
layer.msg(result.data);
} else {
layer.msg(result.data);
}
}
};
$.ajax(config)
3、java后端
public AjaxResult uploads(@RequestParam(required = false, value = "files") MultipartFile[] multipartFiles) throws Exception {
if (multipartFiles.length == 0) {
throw new OssException("上传文件不能为空");
}
String savePath = "D:\\MultipartFile\\";
for (MultipartFile file : multipartFiles) {
// 上传文件
String fileName = file.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf("."));
file.transferTo(new File(savePath + fileName ));
}
}
注意：方法中中value="files"是与html页面中name的属性值一致