jquery-form.js 实现图片和表单一同提交

项目中有一个注册功能，需要用户图片和表单信息一同提交到后台，直接使用ajax提交会报错误

传统的ajax提交
var url = "${request.contextPath}/login/register.html" ;
$.ajax({
url:url,
type:"POST",
data:$("#regform").serialize(),
success: function (message) {
alert(message);
}
});

而如果做成表单单独的图片提交又不太符合需求。

页面的内容：

<#--如果没有设置enctype="multipart/form-data"，文件上传会报  The current request is not a multipart request-->
<form action="" id="regform" method="post" enctype="multipart/form-data">
...............表单和图片内容

<input type='button' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='提交' onclick="register()"/>
</form>

这个时候可以考虑jquery-form.js这个插件，可以实现我们的需求。

前面的代码不变，引入该js文件后

//注册
function register(){
<#--原始的ajax方式提交是失败的-->
<#--$.ajax({-->
<#--url:url,-->
<#--type:"POST",-->
<#--data:$("#regform").serialize(),-->
<#--success: function (message) {-->
<#--alert(message);-->
<#--}-->
<#--});-->

var options = {
url:'${request.contextPath}/login/xx.html?random='+new Date().getTime(),
type:'POST',
//beforeSubmit: showRequest, //提交前处理的函数，也可以在这里写,注意，这里接收的只能是false和true，且不能是函数的名带括号的
dataType:'json', //返回的数据类型：null、"xml"、"script"、"json"其中之一。
//resetForm: true, 表示如果表单提交成功是否进行重置
clearForm:false, //表示如果表单提交成功是否清除表单数据。
success:function(msg){ //提交完后执行的函数
if (msg.status == "error_1"){
alert("上传参数不完整");
} else if (msg.status == "error_2"){
alert("书籍封面未上传");
} else if (msg.status == "error_3"){
alert("书籍未上传");
} else if (msg.status == "error_4"){
alert("图片格式有误，请重新上传");
} else if (msg.status == "error_5"){
alert("图片文件太大，最多上传2M");
} else if (msg.status == "error_6"){
alert("书本格式有误，只能是txt与pdf格式。");
} else if (msg.status == "error_7"){
alert("书籍太大，最多上传20M");
} else if (msg.status == "error_8"){
alert("上传出错");
} else if (msg.status == "error_9"){
alert("上传出错_2");
} else if (msg.status == "success"){
alert("上传成功");
} else {
alert("未知错误！");
}
}
};

$("#regform").ajaxSubmit(options); //使用ajaxForm()插件提交

}

这样，就可以实现图片和表单同步提交，

后台代码

@RequestMapping(value = "xx.html", method = RequestMethod.POST)
public String register(HttpServletResponse response, HttpServletRequest request, ModelMap modelMap,@RequestParam(value = "wizard-picture", required = false)MultipartFile file){
System.out.println("1111111111111111111111111111111111111111111111111111111111111111");
System.out.println(file.getOriginalFilename());
return null;
}

上面的步骤已经完成了请求，如果你的页面不需要进行其他的验证，还有一种方式提交更加方便快捷。

再补充点其他的配置：

var options = {
target: '#output',          //把服务器返回的内容放入id为output的元素中
beforeSubmit: showRequest,  //提交前的回调函数
success: showResponse,      //提交后的回调函数
//url: url,                 //默认是form的action， 如果申明，则会覆盖
//type: type,               //默认是form的method（get or post），如果申明，则会覆盖
//dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型
//clearForm: true,          //成功提交后，清除所有表单元素的值
//resetForm: true,          //成功提交后，重置所有表单元素的值
timeout: 3000               //限制请求的时间，当请求大于3秒后，跳出请求
}