Struts2+ajaxFileUpload+JSP 頁面無刷新上傳

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屢次調試後發現的，也不理解爲何要這樣作，若是哪位大牛看到我這篇博客，還請指教一二，再次先謝謝你們了。