ajax jquery 上传文件

前端之家收集整理的这篇文章主要介绍了ajax jquery 上传文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/includes.jsp"%>
<html>
<head>
	<title>${systemName }</title>
	<style type="text/css">
		.header {
			height: 60px;
			text-align: center;
			background-image: url("${contextPath}/images/headbg3.gif");
			background-repeat: repeat-x;
		}
		
		.headerright {
			float: right;
			height: 100%;
			width: 400px;
		}
		
		.headerright .headerrighttext {
			margin-top: 20px;
		}
		
		.headerright .headerrighttext a,.headerright .headerrighttext a:link {
			text-decoration: none;
		}
		.headerright .headerrighttext .tip {
			float: left;
			height: 15px;
			width: 200px;
		}
		.headerright .headerrighttext .updatepwd {
			color:blue;
			height: 15px;
			float: left;
			width: 80px;
			cursor: pointer;
		}
		
		.headerright .headerrighttext .logout {
			float: left;
			height: 15px;
			width: 80px;
		}
		
		.title {
			float: left;
			margin: 16px 0 0 100px;
			font-weight:bold;
			font-size: 28px;
		}
		
		.memu {
			width: 200px;
		}
		
		.iframe {
			border: 0 none;
		}
		
		.footer {
			height: 20px;
			text-align: center;
			background-color: #E6EEF8;
		}
		
		.icon-excel {
			background: url('${contextPath}/images/excel-small.png') no-repeat
				center center;
		}
		
		#pwdForm {
			margin: 0;
			padding-left: 80px;
			padding-top: 20px;
		}
		
		.ftitle {
			font-size: 14px;
			font-weight: bold;
			padding: 5px 0;
			margin-bottom: 10px;
			border-bottom: 1px solid #ccc;
		}
		
		.fitem {
			margin-bottom: 20px;
			padding-top: 10px;
		}
		
		.fitem label {
			display: inline-block;
			width: 90px;
		}
	</style>
    <script>
    	var isCreate=false; 
    	var createDateStr;
		$.extend($.fn.validateBox.defaults.rules,{
		    equals: {
		        validator: function(value,param){
		            return value == $(param[0]).val();
		        },message: '两次输入的密码不一致!'
		    }
		});
		
		function uploadExcel(){
		    $('#uploadExcel').dialog('open').dialog('setTitle','上传文件');
		    $('#uploadExcelForm').form('clear');
		}
		function uploadExcelForm(){
			var option = {
				    type: "post",success : function(data){
				    	createData();
				   }
				  };
				  $("#uploadExcelForm").ajaxSubmit(option);
		}
		
		function update() {
			jQuery("#dlg").dialog('open').dialog('setTitle','修改密码');
		}
		function updatePassword() {
			if(jQuery('#pwdForm').form('validate')==true){
			  jQuery("#pwdForm").submit();
			}
		}
		function createData(){
			var year=jQuery("[name='year']").val();
			var month=jQuery("[name='month']").val();
			jsTool.ajax({
				url:"${contextPath}/tabledata/createData.do",data:{year:year,month:month},success:function(data){
					showTableTree(data.flag);
					$('#save-dlg').dialog('close');
				},error:function(){
					jQuery.messager.alert('数据生成失败','请检查U8数据库后重试','warning');
				}
			});
		}
		function showData(url){
			url+="?year="+jQuery("[name='year']").val()+"&month="+jQuery("[name='month']").val()+"&isCreate="+isCreate+"&createDateStr="+createDateStr;
			jQuery("[name='mainFrame']").attr("src",url);
		}
		function showTableTree(){
			var year=jQuery("[name='year']").val();
			var month=jQuery("[name='month']").val();
			var url="${contextPath}/show/show001Cover.do";
			jsTool.ajax({
				url:"${contextPath}/tabledata/isCreate.do",success:function(data){
					isCreate=data.flag;
					createDateStr=data.createDateStr;
					var node=jQuery('#showTableData').tree("find","show001Cover");
					jQuery("#showTableData").tree("select",node.target);
					showData(url);
		    		if (isCreate) {
		    			jQuery("#showTableData").show();
					}else {
		    			jQuery("#showTableData").hide();
					}
				},error:function(){
					jQuery.messager.alert('数据连接失败','请检查数据库网络后重试','warning');
				}
			});
    	}
		jQuery(function(){
			jsTool.form({
				form : jQuery("#pwdForm"),datatype:'String',success : function(data) {
					jQuery("#dlg").dialog('close');
				}
			});
			jQuery("#RightAccordion").accordion({ //初始化accordion
			    fillSpace:true,fit:true,border:false,animate:false  
			});
			$.post("${contextPath}/list.do",{ "id": "0" },//获取第一层目录
			function (data) {
				if (data == "0") {
		           window.location = "/Account";
		       }
		       $.each(data,function (i,e) {//循环创建手风琴的项
		           var id = e.id;
		           $('#RightAccordion').accordion('add',{
		               title: e.text,content: "<ul id='tree"+id+"' ></ul>",selected: true,iconCls:e.iconCls//e.Icon
		           });
		           $("#tree" + id).tree({
	                   data: e.children
	               });
		           $.parser.parse();
		       });
			},"json");
			jQuery('#showTableData').tree({
				data: [{
					text: '查看报表',children: [{
						id:'show001Cover',text: '封面',iconCls:'icon-excel',attributes:{
							url:"${contextPath}/show/show001Cover.do"
						}
					},{
						text: '资产负债表',attributes:{
							url:"${contextPath}/show/showZcfzb1.do"
						}
					},{
						text: '资产各月比较表',attributes:{
							url:"${contextPath}/show/showZcfzb2.do"
						}
					},{
						text: '负债和所有者权益各月比较表',attributes:{
							url:"${contextPath}/show/showZcfzb3.do"
						}
					},{
						text: '应收账款分析表-按账龄',attributes:{
							url:"${contextPath}/excels2/sheet005.html"
						}
					},{
						text: '应收账款分析表-按风险',attributes:{
							url:"${contextPath}/excels2/sheet006.html"
						}
					},{
						text: '存在风险应收账款变动表',attributes:{
							url:"${contextPath}/excels2/sheet007.html"
						}
					},{
						text: '存货分析表-按类别',attributes:{
							url:"${contextPath}/show/showChfxblb.do"
						}
					},{
						text: '存货分析表-按风险',attributes:{
							url:"${contextPath}/excels2/sheet009.html"
						}
					},{
						text: '存在风险存货变动表',attributes:{
							url:"${contextPath}/excels2/sheet010.html"
						}
					},{
						text: '利润表',attributes:{
							url:"${contextPath}/show/showLrb1.do"
						}
					},{
						text: '利润表各月比较表',attributes:{
							url:"${contextPath}/show/showLrb1ByMonth.do"
						}
					},{
						text: '营业收入分析表-按地区划分',attributes:{
							url:"${contextPath}/excels2/sheet013.html"
						}
					},{
						text: '营业收入分析表-按品种划分',attributes:{
							url:"${contextPath}/show/show014YysrPz.do"
						}
					},{
						text: '营业成本分析表-按品种划分',attributes:{
							url:"${contextPath}/show/show015YycbPz.do"
						}
					},{
						text: '毛利分析表',attributes:{
							url:"${contextPath}/excels2/sheet016.html"
						}
					},{
						text: '毛利率分析表',attributes:{
							url:"${contextPath}/excels2/sheet017.html"
						}
					},{
						text: '各月销售费用比较表',attributes:{
							url:"${contextPath}/excels2/sheet018.html"
						}
					},{
						text: '各月管理费用比较表',attributes:{
							url:"${contextPath}/excels2/sheet019.html"
						}
					},{
						text: '各月财务费用比较表',attributes:{
							url:"${contextPath}/excels2/sheet020.html"
						}
					},{
						text: '现金流量表各月比较表',attributes:{
							url:"${contextPath}/show/showXjllb1.do"
						}
					},{
						text: '经营成果分析表(月度)',attributes:{
							url:"${contextPath}/show/showJycgfxb1.do"
						}
					},{
						text: '利润分析表',attributes:{
							url:"${contextPath}/show/showLrb1Fxb.do"
						}
					},{
						text: '经营成果分析表(累计)',attributes:{
							url:"${contextPath}/excels2/sheet024.html"
						}
					},{
						text: '可比公司指标平均值',attributes:{
							url:"${contextPath}/excels2/sheet025.html"
						}
					},{
						text: '经营成果分析表(年度)',attributes:{
							url:"${contextPath}/show/showJycgfxb2.do"
						}
					},{
						text: '毛利率计算',attributes:{
							url:"${contextPath}/excels2/sheet027.html"
						}
					},{
						text: '显示测试',attributes:{
							url:"${contextPath}/show/show.do"
						}
					},{
						text:'显示测试_存货分析表',attributes:{
							url:"${contextPath}/show/showChfxblb.do"
						}
					}]
				}],onClick:function(node){
					if(node.attributes){
						var url=node.attributes.url;
						showData(url);
					}
				}
			});
			jQuery('#Title2').tree({
				data: [{
					text: '用户管理',attributes:{
						url:"${contextPath}/user/userOperation.do"
					}
				},{
					text: '角色管理',attributes:{
						url:"${contextPath}/roleOperation.do"
					}
				}],onClick:function(node){
					if(node.attributes){
						var url=node.attributes.url;
						jQuery("[name='mainFrame']").attr("src",url);
					}
				}
			});
			jQuery('#Title3').tree({
				data: [{
					text: '报表导出',attributes:{
						url:"${contextPath}/report/report.do"
						}
				}],url);
					}
				}
			});
			showTableTree();
		});
    </script>
	</head>
	<body>
		<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%;">
			<div class="header" data-options="region:'north'" style="border-bottom:0 none;" >
				<div class="title">${systemName }</div>
					<div class="headerright">
						<div class="headerrighttext">
							<div class="tip">用户名:${sessionScope.curruser.realName}(${sessionScope.curruser.username})</div>
							<div class="updatepwd" onclick="update()">修改密码</div>
							<div class="logout"><a href="${contextPath}/logout.do">退出</a></div>
						</div>
					</div>
			</div>
			<div class="footer" data-options="region:'south'" style="border-top:0 none;">
				&copy;版权所有
			</div>
			<div class="memu" data-options="region:'west',split:true,minWidth:'30',maxWidth:'400'" id="menu">
				<div id="RightAccordion" class="easyui-accordion" data-options="fit:true,border:false">
					<div title="查看表格" data-options="selected:true">
						<div style="text-align: center;">
    						<select id="nian" class="easyui-comboBox" name="year" style="width:80px;" data-options="onSelect: function(rec){
								showTableTree();
	    					}">
    							<option value="${year-5}">${year-5}</option>
    							<option value="${year-4}">${year-4}</option>
    							<option value="${year-3}">${year-3}</option>
    							<option value="${year-2}">${year-2}</option>
    							<option value="${year-1}">${year-1}</option>
    							<option value="${year}" selected>${year}</option>
    							<option value="${year+1}">${year+1}</option>
    							<option value="${year+2}">${year+2}</option>
    							<option value="${year+3}">${year+3}</option>
    							<option value="${year+4}">${year+4}</option>
    							<option value="${year+5}">${year+5}</option>
    						</select>
    						年
    						<select id="yue" class="easyui-comboBox" name="month" style="width:50px;" data-options="onSelect: function(rec){
								showTableTree();
	    					}">
    							<c:forEach begin="1" end="12" var="i">
    								<c:if test="${i==month}">
		    							<option value="${i }" selected="selected">${i }</option>
    								</c:if>
    								<c:if test="${i!=month}">
		    							<option value="${i }">${i }</option>
    								</c:if>
    							</c:forEach>
    						</select>
    						月
						<a href="javascript:void(0)" id="gen" class="easyui-linkbutton" iconCls="icon-add"  onclick="uploadExcel();">生成报告</a>
						</div>
						<div id="showTableData"></div>
					</div>
					<div title="导入导出" data-options="" id="Title3"></div>
					<div title="用户管理" data-options="" id="Title2"></div>
				</div>
			</div>
			<div data-options="region:'center'" style="overflow-y:hidden;border-top:0 none;" >
				<iframe name="mainFrame" src="${contextPath}/show/show001Cover.do" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
		<div id="dlg" class="easyui-dialog" style="width:500px;height:350px;padding:10px 20px"closed="true" buttons="#dlg-buttons">
	        <div class="ftitle">修改密码</div>
		       <form id="pwdForm" method="post" action="${contextPath}/updatePassword.do" novalidate>
		          <div class="fitem">
		               <input name="id" class="easyui-validateBox" value="${sessionScope.curruser.id}" type="hidden">
		          </div>
		          <div class="fitem">
		               <label>请输入新密码:</label>
		               <input id="password"name="password" type="password" class="easyui-validateBox"  data-options="required:true,validType:['length[6,20]']">
		          </div>
		          <div class="fitem">
		               <label>请重新输入密码:</label>
		               <input id="repassword"name="repassword" type="password" class="easyui-validateBox" required="required" validType="equals['#password']">
		         </div>
		       </form>
	    </div>
	    <div id="uploadExcel" class="easyui-dialog" style="width:500px;height:350px;padding:10px 20px"
            closed="true" buttons="#dlg-save-buttons">
	        <div class="ftitle">上传文件</div>
	        <form id="uploadExcelForm" method="post" action="${contextPath}/excel/import.do" enctype="multipart/form-data">
				<input type="file" name="file" />	  
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="uploadExcelForm()">上传生成</a>
	        </form>
    	</div>
	    <div id="dlg-buttons">
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="updatePassword()">保存</a>
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
	    </div>
	</body>
</html>
原文链接:https://www.f2er.com/ajax/164657.html

猜你在找的Ajax相关文章