struts2下利用jquery、ajaxfileupload实现无刷新上传文件

傷城~ 2022-03-11 04:05 169阅读 0赞

要想在struts下实现无刷新上传文件，有很多种方式，但我这里用的是ajaxfileupload这个js库，感觉还比较好用，建议从ajaxfileupload官网下载它的包，里面有比较完整的例子，不过是php的，如果是jsp开发，可以参考我的代码，好了，废话不多说，直接上代码（什么struts配置我就不啰嗦了，直接附上上传相关的代码）

需要的东西：struts2-json-plugin-2.2.1.jar、jquery.js和ajaxfileupload.js（附件可下载）

上传文件的fileUpload.jsp

<%@ page language="java" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <base href="<%=basePath%>" />
    	<title>Excel导入</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        
        <link href="css/fileDiv.css" rel="stylesheet" type="text/css" />
        
        <script type="text/javascript" src="jscript/jquery.js"></script>
        <script type="text/javascript" src="jscript/ajaxfileupload.js"></script>
    	
    	<script type="text/javascript" src="jscript/fileDiv.js"></script>
    	<script type="text/javascript">
    	function ajaxFileUpload()
    	{
    		//starting setting some animation when the ajax starts and completes
    		$("#loading")
    		.ajaxStart(function(){
    			$(this).show();
    		})
    		.ajaxComplete(function(){
    			$(this).hide();
    		});
    		
    		/*
    			prepareing ajax file upload
    			url: the url of script file handling the uploaded files
                            fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
    			dataType: it support json, xml
    			secureuri:use secure protocol
    			success: call back function when the ajax complete
    			error: callback function when the ajax failed
    			
                    */
    		$.ajaxFileUpload
    		(
    			{
    				url:'management/excel_Operation!importExcelWms.jspx',
    				secureuri:false,
    				fileElementId:'file',
    				dataType: 'json',
    				data: {//加入的文本参数  
    		            module_number: "${module_number}",
    		            right: "${right}"
    	        	},
    				success: function (data)
    				{
    					alert(data.message);
    				},
    				error: function (data, e)
    				{
    					alert("错误信息："+e);
    				}
    			}
    		)
    		
    
    	}
    	</script>
      </head>
      
      <body>
      
      <div class="fileDiv" id="fileDiv">
      	<div class="fileDiv-top">数据导入</div>
      	<form action="" id="fileForm" method="post" enctype="multipart/form-data">
      	
      	<div class="fileDiv-search">
    	  	请选择文件：<input type="file" name="file" id="file" class="input-normal"/><br />
    	  	<div class="fileDiv-button">
    	  	<img alt="" src="img/loading.gif" id="loading" style="display: none; width: 50px; height: 50px"/>
    		<a class="button-white" href="javascript:operate('management/excel_Operation!downloadExcel.jspx');"><span>模板下载</span></a>
    		<a class="btn-lit" id="btn_upload" name="btn_upload" href="javascript:ajaxFileUpload();"><span>开始导入</span></a>
    	  	<a class="button-white" href="${backUrl }"><span>返回</span></a>
    		</div>
    	</div>
    	<input type="hidden" name="module_number" id="module_number" value="${module_number }"/>
    	</form>
    	<div class="fileDiv-content">
    	为减少错误,请在导入数据前下载最新Excel模板!<br />
    	说明<br />
        1、淡黄色代表该字段(必填)<br />
        2、淡橙色代表该字段有代码表(必填)<br />
        3、淡绿色代表该字段有代码表(选填)
    	</div>
      </body>
    </html>

Excel\_OperationAction部分处理方法

// 模块导入-wms
    	public void importExcelWms() {
    		JSONObject jsonObj = new JSONObject();
    		String module_number = getRequest().getParameter("module_number");
    		String right = getRequest().getParameter("right");
    		HttpSession session = getRequest().getSession(false);
    		UserDto userDto = (UserDto) session.getAttribute("USER_INFO");
    		
    		String table_dm = new ExcelReader().findName("table_dm",module_number);;
    		String view_dm = module_number;
    		String mk_dm = module_number;
    		InputStream is = null;
    		if (file == null) {
    			jsonObj.put("message", "没有选择文件,请选择要导入的文件!");
    			write(jsonObj.toString());
    			return ;
    			
    		}
    		try {
    			
    			 is = new BufferedInputStream(new FileInputStream(file));
    		} catch (FileNotFoundException e) {
    
    			e.printStackTrace();
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		String msg = new String();
    		
    		if (!Utils.isValidString(table_dm) || !Utils.isValidString(view_dm) || !Utils.isValidString(mk_dm)) {
    			jsonObj.put("message", "模块信息有误,请重新导入(如果多次不成功,请与管理员联系)!");
    			write(jsonObj.toString());
    			return ;
    		} else {
    			msg = new ExcelReader().excelImportWms(table_dm, view_dm, mk_dm, is,userDto);
    		}
    
    		try {
    			if (is != null) {
    				is.close();
    			}
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		jsonObj.put("message", msg);
    		write(jsonObj.toString());
    		return ;
     	}

write方法：

/**
    	 * 功能描述：页面输出
    	 * 
    	 * @param content
    	 *            输出的内容
    	 */
    	protected void write(String content) {
    		if (content != null) {
    			HttpServletResponse response = getResponse();
    			response.setContentType("text/html");
    			response.setCharacterEncoding("UTF-8");
    			try {
    				response.getWriter().println(content);
    				response.getWriter().flush();
    				response.getWriter().close();
    			} catch (IOException e) {
    			}
    		}
    	}

有一个需要注意的地方：到底后台的值怎么传到前台去呢，最好的方法就是通过json传值。

需要的js及jar文件附件里有