jquery.form.js插件实现表单异步提交(文件上传)

近期遇到项目中，一个页面有4个选项卡，8个表单，如果不涉及文件上传，直接用ajax异步提交比较简单，但是偏偏有好几个表单是夹杂了文件上传，传统的异步提交需要分次，比较麻烦。经同学推荐jquery.form.js，实现表单异步提交，简单清爽。

例如（拿其中一个选项卡举例，具体css不予给出）

<div class="right-content hidden" id="education-info">
	<div class="add-education">
		<span>新增学历</span>
	</div>
	<form th:action="@{/staffeducation/addorset}" method="post" id="educationForm" enctype="multipart/form-data">
	<div class="">
		<!-- 学历 -->
		<div class="education-background clearfix">
			<span>学历</span>
			<input type="hidden" name="staffId" th:value="${staff.staffId}"/>
			<input type="hidden" id="educationId" name="educationId" />
			<select name="education" id="education">
				<option value="初中及以下">初中及以下</option>
				<option value="高中">高中</option>
				<option value="中技">中技</option>
				<option value="中专">中专</option>
				<option value="大专">大专</option>
				<option value="本科">本科</option>
				<option value="硕士">硕士</option>
				<option value="MBA">MBA</option>
				<option value="博士">博士</option>
			</select>
			<label><input type="checkbox" value="1" id="educationIsHigh" name="educationIsHigh" /> 最高学历</label>
		</div>

		<!-- 学历类型 -->
		<div class="education-type clearfix">
			<span>学历类型</span>
			<select name="educationType" id="educationType">
				<option value="全日制学历" >全日制学历</option>
				<option value="非全日制学历" >非全日制学历</option>
			</select>
		</div>
				
		<!-- 毕业学校 -->
		<div class="graduate-school clearfix">
			<span>毕业学校</span>
			<input class="form-control" name="educationSchool" id="educationSchool" type="text" maxlength="15" />
		</div>
				
		<div class="graduate-school clearfix">
			<span>毕业专业</span>
			<input class="form-control" name="educationMajor" id="educationMajor" type="text" maxlength="15" />
		</div>
				
		<!-- 毕业时间 -->
		<div class="graduation-date clearfix">
			<span class="date-graduation">毕业时间</span>
			<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="educationTime" data-link-format="yyyy-mm-dd">
	                <input class="form-control" type="text"  value="" readonly="readonly" />
				<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
	         </div>
	         <input type="hidden" id="educationTime" name="educationTime" value="" />
				</div>
				
		<!-- 附件 -->
		<div class="uplaod-accessory clearfix">
			<span>附件</span>
			<div class="uplaod-btn">
				<div class="uplaod-click">点击上传</div>
				<input type="file" id="education_picture" name="img" title="点击上传" />
			</div>
			<div class="uplaod-succeed hidden" title="点击预览">
				<span class="file-name" id="education_filename" data-url=""></span>
			</div>
		</div>
				
		<div class="uplaod-hint">
					请上传学历证书的照片，照片大小不超过10M，附件支持格式：'jpg', 'bmp', 'png'
		</div>
				
		<div class="submit-btn">
			<button class="btn btn-default submit" type="submit">提交</button>
			<button class="btn btn-default back" type="button">取消</button>
		</div>
				
	</div>
	</form>
</div>

juqery.form.js异步提交表单实现方法不唯一，这里我用ajaxForm

$(function()
{
 //配置表单异步提交
    $('#educationForm').ajaxForm({
    	beforeSerialize:assembled_education_form,//表单序列化之前处理某些表单控件值，return false 则表单不提交
    	beforeSubmit : validate_education_form,//表单异步提交之前进行表单值合法性验证，return false 则表单不提交
    	success : function(data) {
    		if(data.state == "200")
    		{
//    			alertShow("保存成功");
                //表单提交成功，异步刷新列表
    	    	$.ajax({
    	    		url:"/staffeducation/getlist",
    	    		type:"get",
    	    		data:{staffId:$("#staffId").val()},
    	    		success:function(data)
    	    		{       //模板引擎返回局部页面
    	    			$("#education_table").replaceWith(data);
    	    			$("#staffContent").removeClass("hidden");
    	    	    	        $("#education-info").addClass("hidden");
    	    		}
    	    	});
    		}
    		else
    		{
    			alertShow("保存失败："+ data.msg);
    		}
    		status = true;
    		$("#educationTime").val("");	//隐藏域不清空，需要手动清空表单
    	},
    	error:function(data){ 
        	status = true;
        	$("#educationTime").val("");	//隐藏域不清空，需要手动清空表单
        },
    	resetForm : true //清空表单
    });
})

function assembled_education_form(form,options)
{
	return true;
}


function validate_education_form(formData, jqForm, options)
{       //防止连续点击，表单重复异步提交
	if(status)
	{
		$("#education_picture").poshytip("hide");
		$("#educationSchool").poshytip("hide");
		$("#educationSchool").poshytip({
			content: '学校不能为空！',
			showOn: 'none',
			alignTo: 'target',
			alignX: 'inner-left',
			offsetX: 0,
			offsetY: 5
		});
		$("#educationMajor").poshytip("hide");
		$("#educationMajor").poshytip({
			content: '专业不能为空！',
			showOn: 'none',
			alignTo: 'target',
			alignX: 'inner-left',
			offsetX: 0,
			offsetY: 5
		});
		
		$("#educationTime").prev().find("input").poshytip("hide");
		$("#educationTime").prev().find("input").poshytip({
			content: '日期不能为空！',
			showOn: 'none',
			alignTo: 'target',
			alignX: 'inner-left',
			offsetX: 0,
			offsetY: 5
		});
		
		status = false;
		
		var flag = true;
		for(var i in formData)
		{
			switch (formData[i].name)
			{
				case "educationSchool":
				{
					if($.trim(formData[i].value) == "")
					{
						flag = false;
						$("#educationSchool").poshytip("show");
					}
					else
					{
						$("#educationSchool").poshytip("hide");
					}
					break;
				} 
				case "educationMajor":
				{
					if($.trim(formData[i].value) == "")
					{
						flag = false;
						$("#educationMajor").poshytip("show");
					}
					else
					{
						$("#educationMajor").poshytip("hide");
					}
					break;
				}
				case "educationTime":
				{
					if($.trim(formData[i].value) == "")
					{
						flag = false;
						$("#educationTime").prev().find("input").poshytip("show");
					}
					else
					{
						$("#educationTime").prev().find("input").poshytip("hide");
					}
					break;
				}
			}
		}
    if(!flag)
        status = true;
		return flag;
	}
	
	return false;
	
}

后台springMVC代码

/**
 * 添加or修改 add 
 * author chensg 
 * 2016.03.15
 */
@RequestMapping(value = "/addorset", method = RequestMethod.POST)
public @ResponseBody RestResult addOrSetStaff(StaffEducation staffEducation,@RequestParam(value = "img" ,required=false) MultipartFile file,HttpServletRequest request,  Model model) {
	if(null == staffEducation.getEducationIsHigh())	//如果没有勾选最高学历，后台不会接受到参数
		staffEducation.setEducationIsHigh(0);
		
	RestResult result = null;
	String educationId ;
	//没有educationId则是新增
	if(null==staffEducation.getEducationId() || "".equals(staffEducation.getEducationId())){
		result =  client.addStaffEducation(staffEducation);
                //获得新增后的唯一uuid
		educationId = result.getResults().get("educationId").toString();
	}else{
		//修改
		result =  client.setStaffEducation(staffEducation);
		educationId = staffEducation.getEducationId();
	}
		
	if( null != file)
	{
                //图片路径用唯一的educationId（uuid）
		String path = request.getSession().getServletContext().getRealPath("upload/"+educationId);
	        String fileName ="educationPicture."+ file.getOriginalFilename().split("\\.")[1];
	        File targetFile = new File(path, fileName);
	        if(!targetFile.exists()){
	            targetFile.mkdirs();
	        }
	        
	        //保存图片路径
	        try {
		            file.transferTo(targetFile);
		            staffEducation = new StaffEducation();
		            staffEducation.setEducationId(educationId);
		            staffEducation.setEducationUrl(request.getContextPath()+"/upload/"+educationId+"/"+fileName);
		            return client.setStaffEducation(staffEducation);
	        } catch (Exception e) {
	            e.printStackTrace();
	        }
		}
		
		return result;
	}