使用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>

效果

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

你可能感兴趣的:(JavaScript,freemarker)