使用layer弹出层+jquery-form.js实现弹出层中提交表单和上传文件

需要两个js
<script src="${base}/res/layer/layer.js" type="text/javascript"></script>
<script src="${base}/res/ywpx/js/jquery-form.js" type="text/javascript"></script> 
//layer的css样式
<link href="${base}/res/layer/theme/default/layer.css" rel="stylesheet" type="text/css"/>




//弹出层
var index =layer.open({	
		  title: ['添加资质证明', 'font-size:18px;text-align:center;'],
		  type: 1,
		  area: ['700px', '250px'], //宽高
		  //弹出对应id的html页面addScheduleDiv
		  content: $('#addScheduleDiv'),
		  shade:0,
		  zIndex:3,
		  btn: ["确认", "取消"],
		  //点击确认执行的方法
		  yes: function (index, layero) {
		  	//要提交的ajax
			  var option = {
		                url : 'upload.do',
		                type : 'POST',
		                dataType : 'json',
		                //headers : {"ClientCallMode" : "ajax"}, //添加请求头部
		                success : function(data) {
		                	var msg="";
		                	if(data.states == 1){
		                		msg="上传成功!";
								
							}else{
								msg="上传失败!";
							}
		                	layer.open({
                			  title:'提示'
                			  ,content: msg
                			}); 
                			//清空输入框
                			$("#level").val("");
		                	$("#type").val("");
		                	$("#file2").val("");
                			//关闭弹出层
		                	layer.close(index);
		                }
		             };
		         //提交
		       $("#addZizhiForm").ajaxSubmit(option);
		  }
		  });
html界面
<!--弹出框 -->
<div id="addScheduleDiv" title="添加资质证明" style="display:none;padding:40px 40px;">
	<form action="upload.do" id="addZizhiForm" enctype="multipart/form-data" method="post">
 		<table > 
		<td>种类</td>
		<td >
		<@p.select value="" name="type" id="type"  headerValue="--请选择--" list=quaType listKey="value" listValue="name"  />
		</td>
		<td>级别</td>
		<td>
		<@p.select value="" name="level" id="level"  headerValue="--请选择--" list=quaLevel listKey="value" listValue="name"  style="width:200px;"/>
		</td>
		<@p.tr/>
		<td >证书:</td>
		<td class="pn-fcontent"  colspan="2">
		<input type="file" name="file2"/>
		</td>
		<@p.tr/>
 		</table> 
	</form>
</div>
效果

效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值