要想在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 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文件附件里有
相关推荐
4. **创建Action类**:在Java代码中,创建`UploadAction`类,继承自Struts 2的ActionSupport类,实现文件上传的方法,如`upload()`。在这个方法中,可以使用`ServletFileUpload`类来处理上传的文件。 5. **前端页面...
首先,我们要了解AjaxFileUpload是jQuery的一个插件,它通过Ajax技术实现了文件的无刷新上传。AjaxFileUpload的核心在于利用HTML5的FormData对象和XMLHttpRequest Level 2的特性,使得浏览器可以发送二进制数据到...
本篇文章将深入讲解如何利用AjaxFileUpload与Struts2实现多文件上传,并结合jQuery进行前端交互。 首先,我们需要在项目中引入必要的库。Struts2提供了struts2-jquery-plugin,这是一个基于jQuery的插件,包含了...
在本文中,我们将深入探讨如何使用`ajaxFileUpload`与`Struts2`框架结合,实现多文件上传功能。这个示例源码提供了一个实用的方法,使得用户可以在不刷新整个页面的情况下,上传多个文件,提高了用户体验。 首先,`...
Struts2是一个非常流行的... Struts2异步上传结合了Struts2框架、jQuery、Ajax、JSON插件和文件处理策略,为用户提供了无刷新的文件上传体验。理解并熟练掌握这些组件和技术,对于开发高效、安全的Web应用至关重要。
总体而言,这个项目利用了前端和后端的协同工作,通过jQuery imgAreaSelect实现用户友好的图片裁剪交互,ajaxfileupload实现无刷新的文件传输,以及Struts2处理服务器端的业务逻辑。这种方式提高了用户体验,同时也...
`jQuery Ajaxfileupload` 是一个用于异步文件上传的JavaScript插件,它允许用户在不刷新页面的情况下上传文件。这个插件是基于jQuery库构建的,因此需要在项目中引入jQuery.js来支持其功能。此外,为了实现异步上传...
在本文中,我们将深入探讨如何使用AjaxFileUpload插件与Struts2框架相结合来实现多文件上传的功能。AjaxFileUpload是一种基于JavaScript的轻量级插件,它允许用户在不刷新整个页面的情况下上传文件,提高了用户体验...
AjaxFileUpload是一个用于实现文件上传的JavaScript插件,它允许用户在网页上轻松地上传文件,并支持异步上传文件而不刷新页面。结合Struts2框架,开发者可以在MVC模式中通过Action类处理文件上传的业务逻辑。 在...
在这个场景中,“Struts2+ajax+json异步上传图片回显”是指利用Struts2框架,通过Ajax技术实现图片的异步上传,并通过JSON进行数据交互,最终实现在页面上即时回显上传的图片。 首先,让我们理解每个组件的作用: ...
总之,结合Struts和jQuery的文件上传功能,可以实现无刷新、用户体验友好的文件上传。在实际应用中,还需要考虑错误处理、文件大小限制、多文件上传等高级特性。同时,为了保证安全性,应该对上传的文件进行验证,...
jQuery AjaxFileUploader是一个非常有用的插件,可以在不刷新页面的情况下实现文件上传,提升用户体验。本文将深入探讨jQuery AjaxFileUploader插件的使用方法,并通过一个具体示例展示其工作流程。 ### jQuery ...
在Struts2中,实现文件上传和下载功能是常见的需求,这对于处理用户交互,如提交表单、交换大文件等,至关重要。下面我们将深入探讨如何在Struts2中实现这些功能,并基于提供的文件名称来解析关键知识点。 首先,...
为了解决这个问题,jQuery提供了一种异步上传(Ajax Upload)的方式,可以在不刷新页面的情况下实现文件上传,提升用户体验。 **jQuery与Struts结合** jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、...
在本场景中,我们讨论的是使用jQuery的Ajax File Upload插件实现异步文件上传,同时在服务器端利用Struts2框架处理上传的文件。 首先,我们需要了解jQuery Ajax File Upload插件。这是一个轻量级的插件,专门用于...
ajax异步上传是一种基于AJAX技术实现的文件上传方式,它可以在不刷新页面的情况下将文件上传到服务器。与传统的表单提交不同,ajax异步上传不需要跳转页面,可以提高用户体验。 知识点二:jquery中的ajax异步上传 ...
在实现文件上传功能时,必须考虑安全问题。例如,防止恶意用户上传病毒文件、SQL注入攻击或跨站脚本攻击(XSS)。应限制上传文件的类型和大小,并对上传的文件名进行重命名,以避免覆盖服务器上的重要文件。 总的来...