Struts2+ajaxFileUpload+JSP 页面无刷新上传

Struts2+AjaxFileUpload 实现无刷新上传

最新推荐文章于 2025-09-05 16:34:31 发布

weixin_34418883

最新推荐文章于 2025-09-05 16:34:31 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

文章标签： java json python

原文链接：https://my.oschina.net/andy1989/blog/161124

本文介绍使用Struts2框架结合AjaxFileUpload组件实现文件无刷新上传的方法，包括所需依赖、配置文件及具体实现代码。同时探讨了在实际应用中遇到的重复上传问题及其两种解决方案。

2019独角兽企业重金招聘Python工程师标准>>>

Struts2+ajaxFileUpload+JSP 页面无刷新上传：

所依赖的jar及js有：下载struts2-json-plugin-2.1.8.1.jar；下载ajaxfileupload.js；下载jquery-1.2.6.min.js

直接分享代码：

web.xml（struts2的过滤器部分）：

<filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

upload.jsp:

<tr>
    			<td width="30%">
    				选择文件：
    			</td>
    			<td width="70%">
    				<input type="file" name="upload" id="file_upload" style="width: 360px">
    				<span id="span_upload"></span>
    				<img alt="" src="<%=path %>/img/loading.gif" id="loading" style="display: none; width: 20px; height: 20px">
    			</td>
    		</tr>
    		<tr>
    			<td colspan="2" align="right">
    				<input value="上传并解析" type="button" id="btn_upload" align="middle" style="width: 100px; height: 30px">
    			</td>
    		</tr>

struts.xml(上传文件部分的配置)：

<!-- 注意：包继承 “json-default” -->
	<package name="struts2" extends="json-default" namespace="/">
		<!-- 上传文件 -->
		<action name="upload" class="fes.andy.frame.action.UploadAction" method="upload">
			<param name="savePath">/upload</param>
			<result type="json" name="success">
				<param name="contentType">text/html</param>
			</result>
			<result type="json" name="error">
				<param name="contentType">html/html</param>
			</result>
		</action>
	</package>

upload.js:

/**
	 * 上传并解析按钮
	 */
	$("#btn_upload").click(function(){
		$("#loading").ajaxStart(function(){
			$(this).show();// 开始上传
		}).ajaxComplete(function(){
			$(this).hide();// 上传结束
		});
		
		$.ajaxFileUpload({
			url:"upload",// 文件上传服务器请求Action
			secureuri:true,// 安全提交，默认为false
			fileElementId:"file_upload",// 文件类型的id
			dataType:"json",// 返回值类型
			success:function(data){// 服务器响应成功
				$("#span_title2").text(data.message).css("color","red");
				$("#upload_result").show();
				$(this).attr("src","/FESWork/img/right2.png");
			},
			error:function(data){// 服务器响应失败
				$("#span_title2").text(data.message).css("color","red");
			}
		})
		return false;
	});

UploadAction.java:

/**
 * @包名 ：fes.andy.frame.action<br>
 * @文件名 ：UploadAction.java<br>
 * @类描述 ：<br>
 * @作者 ：Andy.wang<br>
 * @创建时间 ：2013-9-11上午10:24:43<br>
 * @更改人 ：<br>
 * @更改时间 ：<br>
 */
package fes.andy.frame.action;

import java.io.File;

import fes.andy.frame.util.FileUtil;

/**
 * @包名 ：fes.andy.frame.action<br>
 * @文件名 ：UploadAction.java<br>
 * @类描述 ：上传Jsp文件的Action<br>
 * @作者 ：Andy.wang<br>
 * @创建时间 ：2013-9-11上午10:24:43<br>
 * @更改人 ：<br>
 * @更改时间 ：<br>
 */
public class UploadAction extends SelfActionSupport {

	private static final long serialVersionUID = 1L;
	private File upload;// 上传文件
	private String uploadContentType;// 上传文件类型的属性
	private String uploadFileName;// 上传文件名
	private String savePath;// 上传路径（struts.xml 中配置的参数）

	private String message = "";

	/**
	 * 
	 * @方法名 ：upload<br>
	 * @方法描述 ：上传文件<br>
	 * @创建者 ：Andy.wang<br>
	 * @创建时间 ：2013-9-11上午11:21:51 <br>
	 * @return 返回类型 ：String
	 */
	public String upload() {
		try {
			File targetFile = new File(getServerPath() + savePath);
			if (!targetFile.exists()) {
				targetFile.mkdirs();
			}
			targetFile = new File(targetFile, getUploadFileName());
			boolean b = FileUtil.copyPaste(getUpload(), targetFile);
			if (b)
				message = "文件上传成功，文件名为：" + uploadFileName + "。";
			else
				message = "文件上传失败，文件名为：" + uploadFileName + "。";
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
		return SUCCESS;
	}

	public File getUpload() {
		return upload;
	}

	public void setUpload(File upload) {
		this.upload = upload;
	}

	public String getUploadContentType() {
		return uploadContentType;
	}

	public void setUploadContentType(String uploadContentType) {
		this.uploadContentType = uploadContentType;
	}

	public String getUploadFileName() {
		return uploadFileName;
	}

	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}

	public String getSavePath() {
		return savePath;
	}

	public void setSavePath(String savePath) {
		this.savePath = savePath;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

}

SelfActionSupport.java中的

/**
	 * 
	 * @方法名 ：getServerPath<br>
	 * @方法描述 ：获取服务器路径<br>
	 * @创建者 ：Andy.wang<br>
	 * @创建时间 ：2013-9-11上午11:11:49 <br>
	 * @return 返回类型 ：String
	 */
	public String getServerPath() {
		serverPath = getClass().getProtectionDomain().getCodeSource()
				.getLocation().getPath();
		serverPath = serverPath.substring(1, serverPath.indexOf("WEB-INF"));
		return serverPath;
	}

到此，所有的代码都贴上了。通过浏览器测试发现上传第一个文件，能上传成功：

这时服务器路径下，已经创建一个名为“upload”的文件夹，且选择上传的文件已经成功上传到该文件夹下。该文件夹在struts.xml里配置的路径”<param name="savePath">/upload</param>“。但是，再选择一个文件上传时，会发现报错，错误是找不到Action，如图

第一个url是第一次上传输出的，是正确的；第二个url是第二次上传输出的，是错误的，直接导致”找不到Action“。但是如果把服务器路径下的”upload“文件夹删掉，再选择文件上传时，重新创建一个”upload“文件夹，上传也能成功，然后就再上传还是这个错误，至今不知道是什么原因？如果哪位大牛看到了，还望相告。

出现问题总是要解决的：

方法一：

在UploadAction类中有这样一句话：File targetFile = new File(getServerPath() + savePath)，修改为：File targetFile = new File(getServerPath())就可以了。也就是说在服务器路径下不创建”upload“文件夹，那么所有上传的文件都直接在项目目录下。这种办法是可以的，但是上传文件过多的话，服务器会很乱。

方法二：

在upload.js里$.ajaxFileUpload()方法中有这样一句话：url:"upload"，修改为url:"upload.action"就可以了。这样每次请求的url都是”http://localhost:8888/FESWork/upload“，也是正确的url。

总之，这两种都能解决再次上传报错的问题，但是是我在N多次调试后发现的，也不理解为什么要这样做，如果哪位大牛看到我这篇博客，还请指教一二，再次先谢谢大家了。

转载于:https://my.oschina.net/andy1989/blog/161124