`
1021082712
  • 浏览: 86303 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

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 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文件附件里有

0
0
分享到:
评论

相关推荐

    使用struts 2 和ajaxFileUpload组件实现图片上传预览(完整版)

    4. **创建Action类**:在Java代码中,创建`UploadAction`类,继承自Struts 2的ActionSupport类,实现文件上传的方法,如`upload()`。在这个方法中,可以使用`ServletFileUpload`类来处理上传的文件。 5. **前端页面...

    jquery 插件ajaxfileupload与struts2结合 实现异步上传图片

    首先,我们要了解AjaxFileUpload是jQuery的一个插件,它通过Ajax技术实现了文件的无刷新上传。AjaxFileUpload的核心在于利用HTML5的FormData对象和XMLHttpRequest Level 2的特性,使得浏览器可以发送二进制数据到...

    AjaxFileUpload Struts2 多文件上传

    本篇文章将深入讲解如何利用AjaxFileUpload与Struts2实现多文件上传,并结合jQuery进行前端交互。 首先,我们需要在项目中引入必要的库。Struts2提供了struts2-jquery-plugin,这是一个基于jQuery的插件,包含了...

    ajaxFileUpload+struts2实现多文件上传(源码)

    在本文中,我们将深入探讨如何使用`ajaxFileUpload`与`Struts2`框架结合,实现多文件上传功能。这个示例源码提供了一个实用的方法,使得用户可以在不刷新整个页面的情况下,上传多个文件,提高了用户体验。 首先,`...

    struts2异步上传

    Struts2是一个非常流行的... Struts2异步上传结合了Struts2框架、jQuery、Ajax、JSON插件和文件处理策略,为用户提供了无刷新的文件上传体验。理解并熟练掌握这些组件和技术,对于开发高效、安全的Web应用至关重要。

    j​q​u​e​r​y​ ​i​m​g​a​r​e​a​s​e​l​e​c​t​ + ajaxfileupload + struts2实现图片的异步上传裁剪

    总体而言,这个项目利用了前端和后端的协同工作,通过jQuery imgAreaSelect实现用户友好的图片裁剪交互,ajaxfileupload实现无刷新的文件传输,以及Struts2处理服务器端的业务逻辑。这种方式提高了用户体验,同时也...

    jquery ajaxfileupload异步上传插件

    `jQuery Ajaxfileupload` 是一个用于异步文件上传的JavaScript插件,它允许用户在不刷新页面的情况下上传文件。这个插件是基于jQuery库构建的,因此需要在项目中引入jQuery.js来支持其功能。此外,为了实现异步上传...

    AjaxFileUpload+Struts2实现多文件上传功能

    在本文中,我们将深入探讨如何使用AjaxFileUpload插件与Struts2框架相结合来实现多文件上传的功能。AjaxFileUpload是一种基于JavaScript的轻量级插件,它允许用户在不刷新整个页面的情况下上传文件,提高了用户体验...

    AjaxFileUpload结合Struts2实现多文件上传(动态添加文件上传框)

    AjaxFileUpload是一个用于实现文件上传的JavaScript插件,它允许用户在网页上轻松地上传文件,并支持异步上传文件而不刷新页面。结合Struts2框架,开发者可以在MVC模式中通过Action类处理文件上传的业务逻辑。 在...

    Struts2+ajax+json异步上传图片回显

    在这个场景中,“Struts2+ajax+json异步上传图片回显”是指利用Struts2框架,通过Ajax技术实现图片的异步上传,并通过JSON进行数据交互,最终实现在页面上即时回显上传的图片。 首先,让我们理解每个组件的作用: ...

    struts jquery 上传

    总之,结合Struts和jQuery的文件上传功能,可以实现无刷新、用户体验友好的文件上传。在实际应用中,还需要考虑错误处理、文件大小限制、多文件上传等高级特性。同时,为了保证安全性,应该对上传的文件进行验证,...

    jquery ajaxfileupload异步上传插件使用详解

    jQuery AjaxFileUploader是一个非常有用的插件,可以在不刷新页面的情况下实现文件上传,提升用户体验。本文将深入探讨jQuery AjaxFileUploader插件的使用方法,并通过一个具体示例展示其工作流程。 ### jQuery ...

    struts2的上传和下载功能

    在Struts2中,实现文件上传和下载功能是常见的需求,这对于处理用户交互,如提交表单、交换大文件等,至关重要。下面我们将深入探讨如何在Struts2中实现这些功能,并基于提供的文件名称来解析关键知识点。 首先,...

    jquery异步上传

    为了解决这个问题,jQuery提供了一种异步上传(Ajax Upload)的方式,可以在不刷新页面的情况下实现文件上传,提升用户体验。 **jQuery与Struts结合** jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、...

    jquery之ajaxfileupload异步上传插件(附工程代码)

    在本场景中,我们讨论的是使用jQuery的Ajax File Upload插件实现异步文件上传,同时在服务器端利用Struts2框架处理上传的文件。 首先,我们需要了解jQuery Ajax File Upload插件。这是一个轻量级的插件,专门用于...

    jquery中的ajax异步上传

    ajax异步上传是一种基于AJAX技术实现的文件上传方式,它可以在不刷新页面的情况下将文件上传到服务器。与传统的表单提交不同,ajax异步上传不需要跳转页面,可以提高用户体验。 知识点二:jquery中的ajax异步上传 ...

    fileupload

    在实现文件上传功能时,必须考虑安全问题。例如,防止恶意用户上传病毒文件、SQL注入攻击或跨站脚本攻击(XSS)。应限制上传文件的类型和大小,并对上传的文件名进行重命名,以避免覆盖服务器上的重要文件。 总的来...

Global site tag (gtag.js) - Google Analytics