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

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

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

直接分享代码: java

web.xml(struts2的过滤器部分): jquery

<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: web

<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: ajax

/**
 * @包名 :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中的 apache

/**
	 * 
	 * @方法名 :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,如图 json

第一个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屡次调试后发现的,也不理解为何要这样作,若是哪位大牛看到我这篇博客,还请指教一二,再次先谢谢你们了。

相关文章
相关标签/搜索