在Struts2中使用Uploadify组件上传文件

Uploadify是一个基于Jquery的文件上传组件，官网http://www.uploadify.com/可以在官网获得该组件，运行演示示例，下载帮助文档。
作为Web前端的增强技术，Jquery给用户以更好的体验和交互，增强富互联网客户端特效，而基于Jquery的Uploadify更是将文件上传效果发挥到极致。
一个项目下，需要开发一个上传文件的应用，项目基于Struts2，传统使用input标签的file属性上传是同步的，没有实时效果的。为了增强体验，一个偶然的机会让我发现了这个组件Uploadify。但是官方仅提供基于PHP的上传源码，那么在Struts2下的，就得自行研究了。
废话不多说，让我们一步一步领略Uploadify带来的不同感受。
1.支持的文件
jquery.js,jquery.uploadify.js,uploadify.css;怎获得就不多说了。
2.HTML页面源码

Html代码



<style type="text/css">

div.demo {

padding: 20px;

border: 1px solid #E5E5E5;

margin-bottom: 20px;

background-color: #FFFFFF;

}

</style>

<style type="text/css">
div.demo {
padding: 20px;
border: 1px solid #E5E5E5;
margin-bottom: 20px;
background-color: #FFFFFF;
}
</style>

Js代码



<script language="javascript" src="/js/swfobject.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#upload").uploadify({ 'uploader' : '${base}/images/swf/uploadify.swf',

'script' : 'disk!uploadFile.action',

'cancelImg' : '${base}/images/cancel.png',

'fileDataName' : 'upload',

'folder' : '/',

'displayData' : 'speed',

'buttonText' : 'Browse Files',

'auto' : false,

'multi' : true,

'sizeLimit' : 1073741824,

'simUploadLimit' : 3

});

});

</script>

<script language="javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#upload").uploadify({		'uploader'       : '${base}/images/swf/uploadify.swf',
'script'         : 'disk!uploadFile.action',
'cancelImg'      : '${base}/images/cancel.png',
'fileDataName'   : 'upload',
'folder'         : '/',
'displayData'    : 'speed',
'buttonText'     : 'Browse Files',
'auto'           : false,
'multi'          : true,
'sizeLimit'      : 1073741824,
'simUploadLimit' : 3
});
});
</script>

Html代码



<div class="demo" style="display:none" id="upload_file">

<p><strong>文件上传</strong></p>

<input id="upload" name="upload" type="file" />

<a href="javascript:$('#upload').uploadifyUpload();">开始上传</a> | <a href="javascript:$('#upload').uploadifyClearQueue();">清除队列</a>

</div>

<div class="demo" style="display:none" id="upload_file">
<p><strong>文件上传</strong></p>
<input id="upload" name="upload" type="file" />
<a href="javascript:$('#upload').uploadifyUpload();">开始上传</a> | <a href="javascript:$('#upload').uploadifyClearQueue();">清除队列</a>
</div>

解释：
1).css是文件上传框的效果，不多说
2).重点是JS代码，基于Jquery的技术，函数头就不多解释了。
uploader:是组件自带的flash，用于打开选取本地文件的按钮
scrpit:处理上传的路径，这里使用Struts2，当然是XXX.action
cancelImg:取消上传文件的按钮图片，就是个叉叉
fileDataName:和input的name属性值保持一致就好，Struts2就能处理了
folder:没研究这个，根据帮助文档就写上/
displayData:有speed和percentage两种，一个显示速度，一个显示完成百分比
buttonText:出现在Flash上的文字，暂时还不支持中文
auto:是否选取文件后自动上传
multi:是否支持多文件上传
sizeLimit:限制文件的大小，这里是1G，做测试
simUploadLimit:每次最大上传文件数
3).最后的html段提供两个功能按钮，点击开始上传和清除上传队列
3.Action源码

Java代码



private File upload;//和HTML中input标记name同名

private String uploadFileName;//Struts2拦截器获得的文件名

public void setUpload(File upload) {

this.upload = upload;

}

public void setUploadFileName(String uploadFileName) {

this.uploadFileName = uploadFileName;

}

public String uploadFile() throws Exception {

//省略数据处理步骤

upload.renameTo(new File(realURL));

//省略数据库写入步骤

return "uploadFile";

}

private File upload;//和HTML中input标记name同名
private String uploadFileName;//Struts2拦截器获得的文件名
public void setUpload(File upload) {
this.upload = upload;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
public String uploadFile() throws Exception {
//省略数据处理步骤
upload.renameTo(new File(realURL));
//省略数据库写入步骤
return "uploadFile";
}

效果图