jquery之ajaxfileupload非同步上傳外掛程式(附工程代碼)_jquery

點我下載工程代碼
由於專案需求，在處理文件上傳時需要使用到文件的非同步上傳。這裡使用Jquery Ajax File Uploader這個元件下載位址：http://www.phpletter.com/download_project_version.php?version_id=6
伺服器端採用struts2來處理檔案上傳。
所需環境：
jquery.js
ajaxfileupload.js
struts2所依賴的jar包
及struts2-json-plugin-2.1.8.1.jar
編寫檔案上傳的Action

複製程式碼 程式碼如下:

package com.ajax.file. java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.
@SuppressWarnings("serial")
public class FileAction extends ActionSupport {
private File file;
private String fileFileName;
Filevate String String String String String fileo;成功上傳檔案";
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = 移動; >public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
public String getFileFileName() {
return fileFileName;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
public String getFileFileentType() {fContentType()> 🎜>}
public void setFileFileContentType(String fileFileContentType) {
this.fileFileContentType = fileFileContentType;
}
@SuppressWarnings("deprecation")
}
@SuppressWarnings("deprecation")
}@Oridever throws Exception {
String path = ServletActionContext.getRequest().getRealPath("/upload");
try {
File f = this.getFile();
if(this.getFileFileName() .endsWith(".exe")){
message="對不起,你上傳的檔案格式不允許!!!";
return ERROR;
}
FileInputStream inputStream = new FileInput(f );
FileOutputStream outputStream = new FileOutputStream(path "/" this.getFileFileName());
byte[] buf = new byte[1024];
int length = 0;
while ( length = inputStream.read(buf)) != -1) {
outputStream.write(buf, 0, length);
}
inputStream.close();
outputStream.flush() ;
} catch (Exception e) {
e.printStackTrace();
message = "對不起,檔案上傳失敗了!!!!";
}
return SUCCESS;
}
}


struts.xml

複製程式碼

複製程式碼 程式碼如下所示

text/html




text/html







注意結合Action觀察struts.xml中result的設定。

contentType參數是一定要有的，否則瀏覽器總是提示將傳回的JSON結果另存為文件，不會交給ajaxfileupload處理。這是因為struts2 JSON Plugin預設的contentType是application/json，而ajaxfileupload則要求為text/html。
檔案上傳的jsp頁面

複製程式碼 程式碼如下:

pageEncoding="UTF-8"%>

注意觀察中的程式碼，並沒有form表單。只是在按鈕點擊的時候觸發ajaxFileUpload()方法。要注意的是js檔案引入的先後順序，ajaxfileupload.js依賴jquery因此你知道的。
點我下載工程代碼