`
chenshangge
  • 浏览: 88253 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类

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;
	}
分享到:
评论

相关推荐

    Java毕业设计-ssm-jsp-校园自助洗衣系统(源码+sql脚本+32页零基础部署图文详解+33页论文+环境工具+教程+视频+模板).zip

    资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

    Java毕业设计-ssm-vue-小型企业办公自动化系统(源码+sql脚本+32页零基础部署图文详解+42页论文+环境工具+教程+视频+模板).zip

    资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。VUE框架构建前端交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

    rsyslog-kafka-8.24.0-57.el7-9.3.x64-86.rpm.tar.gz

    1、文件内容:rsyslog-kafka-8.24.0-57.el7_9.3.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/rsyslog-kafka-8.24.0-57.el7_9.3.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

    Java毕业设计-ssm-jsp-助学贷款(源码+sql脚本+32页零基础部署图文详解+29页论文+环境工具+教程+视频+模板).zip

    资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

    qt5-qtcanvas3d-5.9.7-1.el7.x64-86.rpm.tar.gz

    1、文件内容:qt5-qtcanvas3d-5.9.7-1.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/qt5-qtcanvas3d-5.9.7-1.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

    KVM 虚拟化win10PE 带virtio 驱动

    KVM 虚拟化win10PE 带virtio 驱动

    使用python和js逆向破解的某药城商品价格密文参数的源代码,具体步骤可查看文章:https://blog.csdn.net/weixin-42108731/article/details/1454

    使用python和js逆向破解的某药城商品价格密文参数的源代码,具体步骤可查看文章:https://blog.csdn.net/weixin_42108731/article/details/1454

    Java毕业设计-ssm-jsp-在线教育平台(源码+sql脚本+32页零基础部署图文详解+39页论文+环境工具+教程+视频+模板).zip

    资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

    基于Xilinx K7 325T FPGA实现千兆网UDP协议透传通信模块说明,基于xilinx k7 325t实现的千兆网udp协议,只需要设置好IP,端口,就可以直接给数据,基本等同于透传,可以不

    基于Xilinx K7 325T FPGA实现千兆网UDP协议透传通信模块说明,基于xilinx k7 325t实现的千兆网udp协议,只需要设置好IP,端口,就可以直接给数据,基本等同于透传,可以不用管底层协议。 可以 # FPGA 实现udp模块说明 ## udp_protocol_top gig_ethernet_pcs_pma有脚本生成,任何版本vivado都可以支持,注释里面有对重要信号的说明,默认是1000M,100M需要改内部信号,PHY芯片是88E1512,SGMII接口。 FPGA和上位机IP,端口都要设置好才能收到数据,注意在同一个网段 ## 接收数据 udp_protocol_top.rx_udp_payload_axis_tvalid拉高的时候就代表udp_protocol_top.rx_udp_payload_axis_tdata有效,udp_protocol_top.rx_udp_payload_axis_tready默认给1可以一直收数据 ## 发送数据 tx_udp_payload_axis_tready=1的时候拉高tx_udp_payload_axi

    Delphi 12 控件之ConversorVCLUniGUI.7z

    ConversorVCLUniGUI.7z

    Java毕业设计-ssm-jsp-网上手机商城(源码+sql脚本+32页零基础部署图文详解+34页论文+环境工具+教程+视频+模板).zip

    资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

    西门子博图WinCC V15自动化系统项目实战:多服务器客户端下的PID DCS闭环控制及参数调整实战指南,西门子博图WinCC V 15大型自动化系统项目,包含多台服务器客户端项目,系统采用安全15

    西门子博图WinCC V15自动化系统项目实战:多服务器客户端下的PID DCS闭环控制及参数调整实战指南,西门子博图WinCC V 15大型自动化系统项目,包含多台服务器客户端项目,系统采用安全1516F -3PN DP 外挂多台精智面板,1200PLC ET200SP 变频器 对整个工艺过程PID DCS 闭环过程控制,如何调整温度压力流量液位等参数,实用工程项目案例 ,关键词:西门子博图WinCC V 15;大型自动化系统;多台服务器客户端;安全1516F -3PN DP;精智面板;1200PLC ET200SP;变频器;PID DCS闭环过程控制;调整温度;调整压力;调整流量;调整液位;实用工程项目案例。,"西门子博图WinCC V15大型项目:多服务器客户端的PID DCS闭环控制与实用参数调整"

    rarian-devel-0.8.1-11.el7.x64-86.rpm.tar.gz

    1、文件内容:rarian-devel-0.8.1-11.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/rarian-devel-0.8.1-11.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

    Proteus电子电路仿真

    Proteus电子电路仿真

    水稻叶斑病注释数据集(Rice Leaf Spot Disease)【YOLO标注的目标检测数据集】

    The dataset includes the following eight classes:Rice Hispa、Neck Blast、Narrow Brown Leaf Spot、Leaf Scald、Leaf Blast、Healthy Rice Leaf、Brown Spot、Bacterial Leaf Blight。约7000张数据

    Java毕业设计-ssm-jsp-“大学生艺术节”管理系统(源码+sql脚本+32页零基础部署图文详解+37页论文+环境工具+教程+视频+模板).zip

    资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

    Java毕业设计-ssm-jsp-学生请假系统(源码+sql脚本+32页零基础部署图文详解+29页论文+环境工具+教程+视频+模板).zip

    资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

    微电网主从控制孤岛与并网平滑切换策略分析:涵盖VF控制、PQ控制及下垂有功无功环的研究与控制设计,涵盖Matlab模型与实际文档控制应用实践,微电网(两台)主从控制孤岛-并网平滑切的分析 分析了:

    微电网主从控制孤岛与并网平滑切换策略分析:涵盖VF控制、PQ控制及下垂有功无功环的研究与控制设计,涵盖Matlab模型与实际文档控制应用实践,微电网(两台)主从控制孤岛-并网平滑切的分析。 分析了: 1.孤岛下VF控制 2.并网下PQ控制 3.孤岛下主从控制 4.孤岛到并网的平滑切控制 5.除模型外还对分布式发电与主动配电网一些常见问题做了归纳。 包括:matlab2016模型和自己编写文档 控制回路包括:下垂控制有功环无功环,锁相,电压电流双闭环,SVPWM,并网判断,相位同步等。 ,核心关键词:微电网;主从控制;孤岛运行;并网运行;平滑切换控制;VF控制;PQ控制;下垂控制;有功环;无功环;锁相环;电压电流双闭环;SVPWM;并网判断;相位同步;Matlab2016模型;文档编写。,微电网主从控制策略:孤岛与并网平滑切换技术分析

    qt5-qtscript-5.9.7-1.el7.x64-86.rpm.tar.gz

    1、文件内容:qt5-qtscript-5.9.7-1.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/qt5-qtscript-5.9.7-1.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

    qpid-proton-cpp-docs-0.14.0-2.el7.x64-86.rpm.tar.gz

    1、文件内容:qpid-proton-cpp-docs-0.14.0-2.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/qpid-proton-cpp-docs-0.14.0-2.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

Global site tag (gtag.js) - Google Analytics