快捷導(dǎo)航

jquery之a(chǎn)jaxfileupload異步上傳插件(附工程代碼)

更新時(shí)間：2013年04月17日 16:01:04 作者：

在處理文件上傳時(shí)需要使用到文件的異步上傳，這里使用Jquery Ajax File Uploader這個(gè)組件,服務(wù)器端采用struts2來(lái)處理文件上傳

點(diǎn)我下載工程代碼
由于項(xiàng)目需求，在處理文件上傳時(shí)需要使用到文件的異步上傳。這里使用Jquery Ajax File Uploader這個(gè)組件下載地址：http://www.phpletter.com/download_project_version.php?version_id=6
服務(wù)器端采用struts2來(lái)處理文件上傳。
所需環(huán)境：
jquery.js
ajaxfileupload.js
struts2所依賴的jar包
及struts2-json-plugin-2.1.8.1.jar
編寫(xiě)文件上傳的Action

復(fù)制代碼代碼如下:

 
package com.ajaxfile.action; 
import java.io.File; 
import java.io.FileInputStream; 
import java.io.FileOutputStream; 
import org.apache.struts2.ServletActionContext; 
import com.opensymphony.xwork2.ActionSupport; 
@SuppressWarnings("serial") 
public class FileAction extends ActionSupport { 
private File file; 
private String fileFileName; 
private String fileFileContentType; 
private String message = "你已成功上傳文件"; 
public String getMessage() { 
return message; 
} 
public void setMessage(String message) { 
this.message = 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 getFileFileContentType() { 
return fileFileContentType; 
} 
public void setFileFileContentType(String fileFileContentType) { 
this.fileFileContentType = fileFileContentType; 
} 
@SuppressWarnings("deprecation") 
@Override 
public String execute() throws Exception { 
String path = ServletActionContext.getRequest().getRealPath("/upload"); 
try { 
File f = this.getFile(); 
if(this.getFileFileName().endsWith(".exe")){ 
message="對(duì)不起,你上傳的文件格式不允許!!!"; 
return ERROR; 
} 
FileInputStream inputStream = new FileInputStream(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 = "對(duì)不起,文件上傳失敗了!!!!"; 
} 
return SUCCESS; 
} 
} 

struts.xml

復(fù)制代碼代碼如下:

 
<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> 
<struts> 
<package name="struts2" extends="json-default"> 
<action name="fileUploadAction" class="com.ajaxfile.action.FileAction"> 
<result type="json" name="success"> 
<param name="contentType"> 
text/html 
</param> 
</result> 
<result type="json" name="error"> 
<param name="contentType"> 
text/html 
</param> 
</result> 
</action> 
</package> 
</struts> 

注意結(jié)合Action觀察struts.xml中result的配置。
contentType參數(shù)是一定要有的，否則瀏覽器總是提示將返回的JSON結(jié)果另存為文件，不會(huì)交給ajaxfileupload處理。這是因?yàn)閟truts2 JSON Plugin默認(rèn)的contentType為application/json，而ajaxfileupload則要求為text/html。
文件上傳的jsp頁(yè)面

復(fù)制代碼代碼如下:

 
<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/ajaxfileupload.js"></script> 
<script type="text/javascript"> 
function ajaxFileUpload() 
{ 
$("#loading") 
.ajaxStart(function(){ 
$(this).show(); 
})//開(kāi)始上傳文件時(shí)顯示一個(gè)圖片 
.ajaxComplete(function(){ 
$(this).hide(); 
});//文件上傳完成將圖片隱藏起來(lái) 
$.ajaxFileUpload 
( 
{ 
url:'fileUploadAction.action',//用于文件上傳的服務(wù)器端請(qǐng)求地址 
secureuri:false,//一般設(shè)置為false 
fileElementId:'file',//文件上傳空間的id屬性 <input type="file" id="file" name="file" /> 
dataType: 'json',//返回值類型 一般設(shè)置為json 
success: function (data, status) //服務(wù)器成功響應(yīng)處理函數(shù) 
{ 
alert(data.message);//從服務(wù)器返回的json中取出message中的數(shù)據(jù),其中message為在struts2中action中定義的成員變量 
if(typeof(data.error) != 'undefined') 
{ 
if(data.error != '') 
{ 
alert(data.error); 
}else 
{ 
alert(data.message); 
} 
} 
}, 
error: function (data, status, e)//服務(wù)器響應(yīng)失敗處理函數(shù) 
{ 
alert(e); 
} 
} 
) 
return false; 
} 
</script> 
</head> 
<body> 
<img src="loading.gif" id="loading" style="display: none;"> 
<input type="file" id="file" name="file" /> 
<br /> 
<input type="button" value="上傳" onclick="return ajaxFileUpload();"> 
</body> 
</html> 