这两天在做项目时,遇到这样一个问题:业务需求是前台网站客户需要发送问题和附件到网站后台管理系统，类似于QQ对话一样，消息发送不是很难这里我就不讲了(通过ajax无刷新就好),麻烦就在于上传文件时让页面进行无刷新，传统的提交form表单上传文件我相信大家都知道，但是传统的form表单提交上传文件会导致页面进行了刷新，这显然和我们的需求是违背的，所以我们还得从ajax角度去解决这个问题，一般情况下ajax可以对form表单序列化（例如:data:$('#uploadForm').serialize(),)从而将form表单中的所有参数传递到服务端，但是这个方法只能传递一般的参数，文件上传的文件流是无法被序列化传递;
问题:ajax上传文件时表单序列化时无法将文件流传递到后端以及springmvc怎么接受
经过在度娘上一番搜索和测试后终于解决了这个问题：如今大多数浏览器都支持一种叫FormData的对象，有了这个FormData之后使用ajax上传文件的问题就解决了,废话不多说了直接上代码:
<form id="uploadForm">
<div id="div1">
<div><input type="file" name="file" /></div> //注意类型:type="file"
</div>
<input type="button" value="发送附件" class="btnsend" onclick="doUpload()" />
</form>
重点来了主要看js里面是怎么写的:
function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]); //重点
$.ajax({
url:'${ctx}/sossmail/wenjiansc",
type: 'POST',
data: formData, //重点:data类型是formData
async: false,
cache: false,
contentType: false,
processData: false,
dataType : 'json',
success : function (opts) {
//ajax返回成功之后文件下载和消息拼接我就不写了，如果有需要，可以私聊我
});
}
//下面重点来了,控制层springmvc是如何接受解析和上传文件的
//上传文件
@RequestMapping(value = "wenjiansc",method = RequestMethod.POST)
public String upload(HttpServletRequest request,HttpServletResponse response,@RequestParam
("file") MultipartFile[] files,ModelMap model){
//判断file数组不能为空并且长度大于0
if(files!=null&&files.length>0){
//循环获取file数组中得文件
for(int i = 0;i<files.length;i++){
MultipartFile file = files[i];
//保存文件
saveFile(file);//调用saveFile方法
}
}
private boolean saveFile(MultipartFile file) {
// 判断文件是否为空
if (!file.isEmpty()) {
try {
String path="fujian/"+userid+"/"+xmidd+"/"+nowdate;//文件保存路径
String fileName = file.getOriginalFilename();//得到文件名
File savedir = new File( path,fileName);
if (!savedir.exists()) {
savedir.mkdirs();//如果不存在则创建
}
// 转存文件
file.transferTo(savedir);
return true;
} catch (Exception e) {
e.printStackTrace();
}
}
return false;
}
}
