struts2下利用jquery、ajaxfileupload实现无刷新上传文件
要想在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" /> <!-- div(文件上传)css --> <link href="css/fileDiv.css" rel="stylesheet" type="text/css" /> <!-- 一定要注意js加载的前后顺序,先加载jquery再加载ajaxfileupload --> <script type="text/javascript" src="jscript/jquery.js"></script> <script type="text/javascript" src="jscript/ajaxfileupload.js"></script> <!-- div(文件上传)js --> <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 --> <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 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文件附件里有
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。