在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代码  

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

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

Js代码  

1. <script language="javascript" src="/js/swfobject.js"></script>  
2. <script type="text/javascript">  
3. $(document).ready(function() {  
4.     $("#upload").uploadify({        'uploader'       : '${base}/images/swf/uploadify.swf',  
5.     'script'         : 'disk!uploadFile.action',  
6.     'cancelImg'      : '${base}/images/cancel.png',  
7.     'fileDataName'   : 'upload',  
8.     'folder'         : '/',  
9.     'displayData'    : 'speed',  
10.     'buttonText'     : 'Browse Files',  
11.     'auto'           : false,  
12.     'multi'          : true,  
13.     'sizeLimit'      : 1073741824,  
14.     'simUploadLimit' : 3  
15.     });  
16. });  
17. </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代码  

1. <div class="demo" style="display:none" id="upload_file">  
2. <p><strong>文件上传</strong></p>  
3. <input id="upload" name="upload" type="file" />  
4. <a href="javascript:$('#upload').uploadifyUpload();">开始上传</a> | <a href="javascript:$('#upload').uploadifyClearQueue();">清除队列</a>  
5. </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代码  

1.     private File upload;//和HTML中input标记name同名  
2.     private String uploadFileName;//Struts2拦截器获得的文件名  
3.     public void setUpload(File upload) {  
4.         this.upload = upload;  
5.     }  
6.     public void setUploadFileName(String uploadFileName) {  
7.         this.uploadFileName = uploadFileName;  
8.     }  
9. public String uploadFile() throws Exception {  
10.                   //省略数据处理步骤  
11.         upload.renameTo(new File(realURL));  
12.                   //省略数据库写入步骤  
13.         return "uploadFile";  
14.     }  

	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";
	}

效果图

19
顶

1
踩

分享到：

评论

30 楼 李庆辉 2012-09-17   引用

非常感谢楼主，楼主辛苦，呵呵

29 楼 dingyushuang 2012-05-21   引用

楼主、、能不能把Action中的代码写的详细点呀！！最近在弄这个。。参考一下。。

28 楼 sarin 2012-05-05   引用

liuyoushen 写道

能不能支持两G的文件啊

原理上是可以的，不过2G文件通过HTTP方式传输的可靠性，您认为如何？

27 楼 liuyoushen 2012-04-26   引用

能不能支持两G的文件啊

26 楼 sarin 2011-09-28   引用

socrazy06 写道

楼主你好，按照你的demo，我自己也写了一个例子。
但是有一个问题，在IE6-9一切正常，但是我用firefox，不调用'script'         : 'disk!uploadFile.action',  中的action，半天没找出原因，希望楼主抽空看下。

这个action是struts2的请求

25 楼 socrazy06 2011-09-28   引用

楼主你好，按照你的demo，我自己也写了一个例子。
但是有一个问题，在IE6-9一切正常，但是我用firefox，不调用'script'         : 'disk!uploadFile.action',  中的action，半天没找出原因，希望楼主抽空看下。

24 楼 sarin 2011-04-05   引用

xiaojianhx 写道

sunshuxin 写道

楼主，你好，为什么我按照你上面的代码做的一个HTML页面跑起来后，页面元素：
<input id="upload" name="upload" type="file" />
看不见了；但是要是去掉 $(document).ready(function() {...} 这一块js代码，
上传元素就出现在页面了。不知道为什么，很奇怪。
望楼主赐教！

一样的问题

这是jquery在页面准备好时执行的代码，可能是后面还未加载完全，这里不适合使用。去掉就行了

23 楼 xiaojianhx 2011-04-05   引用

sunshuxin 写道

楼主，你好，为什么我按照你上面的代码做的一个HTML页面跑起来后，页面元素：
<input id="upload" name="upload" type="file" />
看不见了；但是要是去掉 $(document).ready(function() {...} 这一块js代码，
上传元素就出现在页面了。不知道为什么，很奇怪。
望楼主赐教！

一样的问题

22 楼 hankai_hk 2010-12-10   引用

好，不错 学习了

21 楼 sunshuxin 2010-07-15   引用

楼主，你好，为什么我按照你上面的代码做的一个HTML页面跑起来后，页面元素：
<input id="upload" name="upload" type="file" />
看不见了；但是要是去掉 $(document).ready(function() {...} 这一块js代码，
上传元素就出现在页面了。不知道为什么，很奇怪。
望楼主赐教！

20 楼 sunshuxin 2010-07-15   引用

楼主，你好，下面这行代码我看不懂：
'script'         : 'disk!uploadFile.action'
这个!是什么意思，怎么不是/，前面的 disk 是一个命名空间的名称么？看不懂。
还有
你给的Action的代码太少了点，能不能给一些“如何使用上传组件对文件进行处理”的代码啊？
谢谢！

19 楼 tongqiuyan 2010-06-12   引用

请教楼主，checkScript的用法知道吗？
我用了以后，文件不上传了。

18 楼 sarin 2010-06-09   引用

renci 写道

楼主你好,如果我是在form中传文件怎么写呢,form中还有其他的参数需要一起传到后台.

<form>的method必须是post，enctype属性是multipart/form-data
处理时选择上传组件对文件进行处理即可。其他参数getParameter()就能获取到

17 楼 renci 2010-06-09   引用

楼主你好,如果我是在form中传文件怎么写呢,form中还有其他的参数需要一起传到后台.

16 楼 sarin 2010-01-26   引用

uestc2510 写道

不好意思再次麻烦楼主。用uploadify上传时虽然上传成功了，但是控制台会报异常，内容如下：
Cannot create type class java.io.File from value Submit Query - [unknown location]
....省略一些，挑关键的
at java.lang.Thread.run(Thread.java:619)
2009-11-13 00:17:48 [com.opensymphony.xwork2.ognl.OgnlValueStack]-[WARN] Error setting expression 'Upload' with value '[Ljava.lang.String;@ff5d3f'
ognl.MethodFailedException: Method "setUpload" failed for object [email protected] [java.lang.NoSuchMethodException: com.ttni.haveFun.Action.upload.FileUploadAction.setUpload([Ljava.lang.String;)]
如果楼主有耐心看的话，这些异常信息里的"upload"就是我在jsp中<input type="file" name="upload" id="upload" />里的字段，setUpload()为其在Action中的setter方法。虽然不影响上传和DB的写入，但报异常终究不是好事。这个问题困扰了我好几天，请楼主帮忙。不知你有没有遇到过这个异常情况。

这个问题只能修改参数名不用upload，它好像是系统保留字一样，使用就会有这种问题。

15 楼 sarin 2009-11-19   引用

NemoLee 写道

最近项目一直在研究这个组件！
我写的代码和楼主写的思路是一样的
但是遇到一个问题

对于script配置项，目前和楼主一样测试通过的 是相同namespace下的action
但是对于跨namespace的就不知道为什么不行了，进不了Action的
假设我现在的namespace是mail ,url是 /xxx/mail/mail.action
我将FileAction放到与MailAction相同的namespace下，按照下面的写法，是没有问题的

Java代码  

1. 'script'         : 'file!update.action',  

'script'         : 'file!update.action',

但是如果我将FileAction转移到其专有的namespace：file的话，利用下面的任何一种种写法都是不行的

Java代码  

1. 'script'         : '${base}/file/file!update.action',  
2. 'script'         : '../file/file!update.action',  

'script'         : '${base}/file/file!update.action',
'script'         : '../file/file!update.action',

望楼主赐教

跨命名空间的测试我还没有测试这个组件，但是在以往的项目中，我是在xml配置action时，class属性就跨了，但是不跨页面的namespace。您可以这样试试，此时在action中加入method属性就应该可以了。

14 楼 NemoLee 2009-11-18   引用

最近项目一直在研究这个组件！
我写的代码和楼主写的思路是一样的
但是遇到一个问题

对于script配置项，目前和楼主一样测试通过的 是相同namespace下的action
但是对于跨namespace的就不知道为什么不行了，进不了Action的
假设我现在的namespace是mail ,url是 /xxx/mail/mail.action
我将FileAction放到与MailAction相同的namespace下，按照下面的写法，是没有问题的

Java代码  

1. 'script'         : 'file!update.action',  

'script'         : 'file!update.action',

但是如果我将FileAction转移到其专有的namespace：file的话，利用下面的任何一种种写法都是不行的

Java代码  

1. 'script'         : '${base}/file/file!update.action',  
2. 'script'         : '../file/file!update.action',  

'script'         : '${base}/file/file!update.action',
'script'         : '../file/file!update.action',

望楼主赐教

13 楼 sarin 2009-11-17   引用

kevin030501210 写道

楼主你好，我的控制台显示错误。说找不到action或者action里没有result，我断点断不到，明显是没进入action，不知道哪里错误，搞了一天半了，能不能把你struts2下面多文件上传的完整例子发个新帖出来。或者发邮件给我[email protected]，急用，谢谢

如果没有进入action方法，肯定是配置文件的问题了，不妨贴出来看看。这个项目是研究项目，我不方便贴全代码的

12 楼 kevin030501210 2009-11-17   引用

楼主你好，我的控制台显示错误。说找不到action或者action里没有result，我断点断不到，明显是没进入action，不知道哪里错误，搞了一天半了，能不能把你struts2下面多文件上传的完整例子发个新帖出来。或者发邮件给我[email protected]，急用，谢谢

11 楼 sarin 2009-11-13   引用

uestc2510 写道

追加一个问题，用uploadify组件上传时，jsp中<input type="file" name="upload" id="upload" />里的name必须为"upload"吗？为什么我改成其他的名字(比如name="myFile"，当然Action里的字段也跟着改)就上传不了，原因是在Action中this.getUploadFileName()是null。这是为什么呢？

'fileDataName'   : 'upload',   这个js段也得改啊，因为最终是js上传的。
异步传输的时候因为struts2的action不需要返回结果来显示，把上传方法返回值设成null即可，不设置null，那么在xml配置文件不要写result标签。这只是异步处理的方法，不需要用视图来响应请求

10 楼 uestc2510 2009-11-13   引用