原文链接:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html
由于项目需求,在处理文件上传时需要使用到文件的异步上传。这里使用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.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 Filefile;
private StringfileFileName;
private StringfileFileContentType;
private Stringmessage = " 你已成功上传文件 " ;
public StringgetMessage(){
return message;
}
public void setMessage(Stringmessage){
this .message = message;
}
public FilegetFile(){
return file;
}
public void setFile(Filefile){
this .file = file;
}
public StringgetFileFileName(){
return fileFileName;
}
public void setFileFileName(StringfileFileName){
this .fileFileName = fileFileName;
}
public StringgetFileFileContentType(){
return fileFileContentType;
}
public void setFileFileContentType(StringfileFileContentType){
this .fileFileContentType = fileFileContentType;
}
@SuppressWarnings( " deprecation " )
@Override
public Stringexecute() throws Exception{
Stringpath = ServletActionContext.getRequest().getRealPath( " /upload " );
try {
Filef = this .getFile();
if ( this .getFileFileName().endsWith( " .exe " )){
message = " 对不起,你上传的文件格式不允许!!! " ;
return ERROR;
}
FileInputStreaminputStream = new FileInputStream(f);
FileOutputStreamoutputStream = 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 (Exceptione){
e.printStackTrace();
message = " 对不起,文件上传失败了!!!! " ;
}
return SUCCESS;
}
}
struts.xml
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 Filefile;
private StringfileFileName;
private StringfileFileContentType;
private Stringmessage = " 你已成功上传文件 " ;
public StringgetMessage(){
return message;
}
public void setMessage(Stringmessage){
this .message = message;
}
public FilegetFile(){
return file;
}
public void setFile(Filefile){
this .file = file;
}
public StringgetFileFileName(){
return fileFileName;
}
public void setFileFileName(StringfileFileName){
this .fileFileName = fileFileName;
}
public StringgetFileFileContentType(){
return fileFileContentType;
}
public void setFileFileContentType(StringfileFileContentType){
this .fileFileContentType = fileFileContentType;
}
@SuppressWarnings( " deprecation " )
@Override
public Stringexecute() throws Exception{
Stringpath = ServletActionContext.getRequest().getRealPath( " /upload " );
try {
Filef = this .getFile();
if ( this .getFileFileName().endsWith( " .exe " )){
message = " 对不起,你上传的文件格式不允许!!! " ;
return ERROR;
}
FileInputStreaminputStream = new FileInputStream(f);
FileOutputStreamoutputStream = 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 (Exceptione){
e.printStackTrace();
message = " 对不起,文件上传失败了!!!! " ;
}
return SUCCESS;
}
}
<?
xmlversion="1.0"encoding="UTF-8"
?>
<! DOCTYPEstrutsPUBLIC"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.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 >
注意结合Action观察struts.xml中result的配置。
<! DOCTYPEstrutsPUBLIC"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.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 >
contentType参数是一定要有的,否则浏览器总是提示将返回的JSON结果另存为文件,不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json,而ajaxfileupload则要求为text/html。
文件上传的jsp页面
<%
@pagelanguage
=
"
java
"
contentType
=
"
text/html;charset=UTF-8
"
pageEncoding = " UTF-8 " %>
<! DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< Meta http-equiv ="Content-Type" content ="text/html;charset=UTF-8" >
< title > Inserttitlehere </ 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();
}) // 开始上传文件时显示一个图片
.ajaxComplete( function (){
$( this ).hide();
}); // 文件上传完成将图片隐藏起来
$.ajaxFileUpload
(
{
url:'fileUploadAction.action', // 用于文件上传的服务器端请求地址
secureuri: false , // 一般设置为false
fileElementId:'file', // 文件上传空间的id属性<inputtype="file"id="file"name="file"/>
dataType:'json', // 返回值类型一般设置为json
success: function (data,status) // 服务器成功响应处理函数
{
alert(data.message); // 从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
if ( typeof (data.error) != 'undefined')
{
if (data.error != '')
{
alert(data.error);
} else
{
alert(data.message);
}
}
},
error: function (data,status,e) // 服务器响应失败处理函数
{
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 ="returnajaxFileUpload();" >
</ body >
</ html >
注意观察<body>中的代码,并没有form表单。只是在按钮点击的时候触发ajaxFileUpload()方法。需要注意的是js文件引入的先后顺序,ajaxfileupload.js依赖于jquery因此你知道的。
pageEncoding = " UTF-8 " %>
<! DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< Meta http-equiv ="Content-Type" content ="text/html;charset=UTF-8" >
< title > Inserttitlehere </ 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();
}) // 开始上传文件时显示一个图片
.ajaxComplete( function (){
$( this ).hide();
}); // 文件上传完成将图片隐藏起来
$.ajaxFileUpload
(
{
url:'fileUploadAction.action', // 用于文件上传的服务器端请求地址
secureuri: false , // 一般设置为false
fileElementId:'file', // 文件上传空间的id属性<inputtype="file"id="file"name="file"/>
dataType:'json', // 返回值类型一般设置为json
success: function (data,status) // 服务器成功响应处理函数
{
alert(data.message); // 从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
if ( typeof (data.error) != 'undefined')
{
if (data.error != '')
{
alert(data.error);
} else
{
alert(data.message);
}
}
},
error: function (data,status,e) // 服务器响应失败处理函数
{
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 ="returnajaxFileUpload();" >
</ body >
</ html >