easyui和jquery的ajaxupload结合文件上传问题

影非弦 发布于 2015/06/22 18:03
阅读 18K+
收藏 0

页面使用了easyui,在datagrid的工具栏中有一个a标签按钮,点击弹出一个window,里面是一个input一个a标签按钮,选择文件之后input中的值是C:/fakepath/文件名,在js中使用$('#uploadfile').val(),得到的值为空,文件上传在普通页面是可以的,但是使用了easyui就不行了,也获取不到文件路径,网上找了也说是浏览器的问题,现在就是像实现在弹出的window中选择文件,提交之后在servlet能通过request获取到这个我文件,如List fileList = upload.parseRequest(request);

下面是页面代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test easy ui</title>
	<link rel="stylesheet" type="text/css" href="easyui/css/easyui.css"> 
	<link rel="stylesheet" type="text/css" href="easyui/css/icon.css"> 
	<link rel="stylesheet" type="text/css" href="easyui/css/demo.css"> 
	<link rel="stylesheet" type="text/css" href="easyui/css/color.css"> 
	<script type="text/javascript" src="easyui/js/jquery.min.js"></script> 
	<script type="text/javascript" src="easyui/js/jquery.easyui.min.js"></script> 
	<script type="text/javascript" src="/SaleReport/js/ajaxfileupload.js"></script>
  </head>
  <body>
    <table id="dg" title="回款指标" class="easyui-datagrid" style="width: 1110px; height: 500px;" url="getUsers.jsp" nowrap="false" toolbar="#tbb" singleselect="true" fitcolumns="true" pagination="true" rownumbers="true" footer=""> 
    	<thead> 
    		<tr> 
    			<th width="50" field="status"><br><br>状态</th> 
    			<th width="60" field="area_name">区域</th> 
    			<th width="60" field="branch_id">公司编号</th> 
    			<th width="120" field="branch_name">公司名称</th> 
    			<th width="40" field="fac_id">工厂</th> 
    			<th width="120" field="fac_name">工厂描述</th> 
    			<th width="40" field="year">年份</th> 
    			<th width="30" field="month">月份</th> 
    			<th width="90" field="base_target">基础回款目标</th> 
    			<th width="90" field="complete_target">达成回款目标</th> 
    			<th width="90" field="challenge_target">挑战回款目标</th> 
    			<th width="90" field="sale_target">销售目标</th> 
    			<th width="80" field="create_time">创建时间</th> 
    			<th width="80" field="update_time">更新时间</th> 
    			<th width="70" field="create_user">创建人</th> 
    		</tr> 
    	</thead> 
    </table>
    
    <div id="tbb" style="padding:2px 5px;">
    	<div id="tb" style="padding: 2px 5px;"> 
	    	From:<input class="easyui-datebox" style="width: 110px;"> 
	    	To:<input class="easyui-datebox" style="width: 110px;"> 
	    	区域: 
	    	<select class="easyui-combobox" panelheight="auto" style="width: 100px;"> 
	    		<option value="DN00">东南区域</option> 
	    		<option value="XB00">西北区域</option> 
	    		<option value="DB00">东北区域</option> 
	    		<option value="XN00">西南区域</option> 
	    		<option value="HZ00">华中区域</option> 
	    		<option value="HB00">华北区域</option> 
	    		<option value="HD00">华东区域</option> 
	    		<option value="HN00">华南区域</option> 
	    	</select> 
	    	<a href="#" class="easyui-linkbutton" iconcls="icon-search">Search</a> 
	    </div>
	    <div id="ft" style="padding: 2px 5px;">  
	    	<a href="#" class="easyui-linkbutton" iconcls="icon-add" onclick="addInfo();" plain="true">添加</a> 
	    	<a href="#" class="easyui-linkbutton" iconcls="icon-edit" onclick="updateInfo();" plain="true">修改</a> 
	    	<a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true">删除</a> 
	    	<a href="#" class="easyui-linkbutton" iconcls="icon-save" plain="true">确认</a> 
	    	<a href="#" class="easyui-linkbutton" iconcls="icon-cut" onclick="$('#dd').window('open')" plain="true">导入</a> 
	    	<a href="servlet/WriteExcelServlet?type=pi" class="easyui-linkbutton" iconcls="icon-cut" plain="true">下载模版</a>	    </div>
            </div>
    <div id="dlg" class="easyui-dialog" style="width:400px;height:450px;padding:10px 20px;" closed="true" buttons="#dlg-buttons">
    	<div class="ftitle">回款信息</div>
    	<form id="fm" method="post" novalidate>
    		<div class="fitem">
    			<label>区域</label>
    			<input name="area_name" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>公司编号</label>
    			<input name="branch_id" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>公司名称</label>
    			<input name="branch_name" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>工厂</label>
    			<input name="fac_id" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>工厂描述</label>
    			<input name="fac_name" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>年份</label>
    			<input name="year" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>月份</label>
    			<input name="month" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>基础回款目标</label>
    			<input name="base_target" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>完成回款目标</label>
    			<input name="complete_target" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>挑战回款目标</label>
    			<input name="challenge_target" class="easyui-textbox" required="true">
    		</div>
    		<div class="fitem">
    			<label>销售目标</label>
    			<input name="sale_target" class="easyui-textbox" required="true">
    		</div>
    	</form>
    </div>
    <div id="dlg-buttons">
    	<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save();" style="width:90px;">保存</a>
    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px;">取消</a>
    </div>
    <script type="text/javascript">
    	var url;
    	
    	function addInfo(){
    		$('#dlg').dialog('open').dialog('setTitle','添加回款信息');
    		$('#fm').form('clear');
    		url = "servlet/AddInfoServlet?type=pi";
    	}
    	
    	function updateInfo(){
    		var row = $('#dg').datagrid('getSelected');
    		if(row){
    			$('#dlg').dialog('open').dialog('setTitle','修改信息');
    			$('#fm').form('load',row);
    			url= 'servlet/WriteExcelServlet?id='+row.id;
    		}
    	}
    	
    	function save(){
    		$('#fm').form('submit',{
    			url:url,
    			onSubmit:function(){
    				return $(this).form('validate');
    			},
    			success:function(result,status){
    				//var result = eval('('+result+')');
    				alert(result);
    				if(result != 'success'){
    					$.messager.show({
    						title:'Error',
    						msg:'出现错误!'
    					});
    				}else{
    					$('#dlg').dialog('close');
    					$('dg').datagrid('reload');
    				}
    			}
    		});
    	}
    	
    	function impInfo(){
    	alert(getPath(document.getElementById('uploadfile')));
    		alert("1===" + $('#uploadfile').val());
    		if($('#uploadfile').val() == "")
			{
				alert("请选择Excel文件!");
				return;
			}
			$('#loading').ajaxStart(function(){
				$(this).show();
			})//开始上传文件时显示一个图片
			.ajaxComplete(function(){
				$(this).hide();
			});
			
			$.ajaxFileUpload({
				url:'servlet/ReadExcelServlet',//用于文件上传的服务器端请求地址
				secureuri:true,//是否启用安全提交,一般设置为false
				fileElementId:'uploadfile',//文件上传控件的id
				dataType:'text',//服务器返回的数据类型
				success: function (data,status){
					if(data == 'success'){
						$('#dd').window('close');
						alert("导入成功!");
					}else if(data == 'error'){
						alert("文件上传过程中出错!请重试!");
					}
				},
				error: function (data,status,e){
					alert("服务中断或连接超时导致通信失败!");
					alert(e);
				}
			}
			)
			return false;
    	}
    	
    	function getPath(obj){
    		if(obj){
    			if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
            	obj.select();
            	return document.selection.createRange().text;
    		}else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
    			 if (obj.files) {
                	return obj.files.item(0).getAsDataURL();
            	}
            	return obj.value;
    		}
    		return obj.value;
    	}
    }
    </script>
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:160px;
        }
    </style>
    <div id="dd" class="easyui-window" title="一键导入" data-options="top:'80px',modal:true,closed:true,iconCls:'icon-save'" style="width:300px;height:200px;padding:10px;">
    	<div style="margin-bottom:20px;">
    		<input id="uploadfile" class="easyui-filebox" data-options="prompt:'请选择一个Excel文件'" style="width:100%;">
    	</div>
    	<div>
    		<a href="#" class="easyui-linkbutton" style="width:100%" onclick="impInfo();">上  传</a>
    	</div>
    	<div>
              <img src="images/loading.gif" id="loading" style="display: none;">
       </div>
    </div>
  </body>
</html>



加载中
0
王爵nice
王爵nice
$(".easyui-window").find("#uploadfile").val() 试试



影非弦
影非弦
回复 @刘大贱 : 在chrome调试下看看这个到底是覆盖掉了还是怎么了,我好想没遇到这个问题,easyui会自动生成很多的span和label之类的
刘大贱
回复 @影非弦 : 你好,你使用filebox在IE下有没有遇到前面显示的span把后面的label覆盖了导致点击无效的问题。
影非弦
影非弦
找到问题的原因了,看了easyui.min.js源码之后,发现了easyui是自己生成的id,而不是我设定的那个id,所以我用我自己设定的id当然是没法获取到值的,还有路径问题,这个不影响上传,只要使用easyui生成的id去获取值就可以,在IE选项里面的安全设置里面有设置
0
程序猿之小菜鸟
程序猿之小菜鸟
$('#uploadfile').filebox('getValue')
0
l
laoer

怎么解决的?我后台接收不到文件那?


返回顶部
顶部