在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页面源码

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

<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>

<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源码

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

效果图

评论

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  

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

9 楼 uestc2510 2009-11-13  

不好意思再次麻烦楼主。用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 com.ttni.haveFun.Action.upload.FileUploadAction@1e229be [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的写入，但报异常终究不是好事。这个问题困扰了我好几天，请楼主帮忙。不知你有没有遇到过这个异常情况。

8 楼 sarin 2009-11-11  

flyingcai 写道

此组件，是否为多线程上线呢？

可以这么理解，多文件提交测试是没问题的，我设置是3个，太多也没必要吧，还得根据项目来看，sttuts2在请求到达时就创建action对象对其响应啊。不是struts1那样单例的，所以线程是安全的。

7 楼 sarin 2009-11-11  

uestc2510 写道

还有个问题想问下楼主，uploadify上传时的进度条为什么是在程序进入action类之前就显示了100%，莫非它的进度是指将上传的文件复制到服务器的临时文件的进度？

本地测试速度非常快，建议用比较大的文件做测试。一般在action中我先将文件放到指定位置后，再写数据库，避免文件上传失败，数据库有记录。

6 楼 sarin 2009-11-11  

()方法，执行里面的代码,但用uploadify插件这样弄不行，不知道为什么。如果不用uploadify插件，直接上传，用我说的方法

uestc2510 写道

太感谢你了，楼主。按照你的方法，我成功了！
我以前的写法是actionl类继承ActionSupport类，执行上传的代码也是写在execute()里的，理应这种写法不用在struts.xml里指定method="xx"，struts2会默认找到execute()方法，执行里面的代码,但用uploadify插件这样弄不行，不知道为什么。如果不用uploadify插件，直接上传，用我说的方法又是可以的。
可用是uploadify插件不支持这种种写法吧。
最后，还是要感谢楼主的热心帮助。

我一般在action包中抽象出一个action基类，继承ActionSupport，覆盖execute()方法，用于返回SUCCESS，保证方法都能顺利执行。在具体实现类中写具体方法，如果不使用！格式的提交请求，在action标签配置method即可。我是用的!写法，上传没问题的

5 楼 flyingcai 2009-11-11  

此组件，是否为多线程上线呢？

4 楼 uestc2510 2009-11-10  

还有个问题想问下楼主，uploadify上传时的进度条为什么是在程序进入action类之前就显示了100%，莫非它的进度是指将上传的文件复制到服务器的临时文件的进度？

3 楼 uestc2510 2009-11-10  

太感谢你了，楼主。按照你的方法，我成功了！
我以前的写法是actionl类继承ActionSupport类，执行上传的代码也是写在execute()里的，理应这种写法不用在struts.xml里指定method="xx"，struts2会默认找到execute()方法，执行里面的代码,但用uploadify插件这样弄不行，不知道为什么。如果不用uploadify插件，直接上传，用我说的方法又是可以的。
可用是uploadify插件不支持这种种写法吧。
最后，还是要感谢楼主的热心帮助。

2 楼 sarin 2009-11-10  

uestc2510 写道

楼主你好，我在Struts2中使用Uploadify组件上传文件遇到了问题，配置项'script':'xx.action',但是debug是怎么也进不了Action,（说明一下Struts2的配置是没问题的，因为我不用Uploadify组件直接上传时成功了的），请问是什么原因？

如果是XX.action不是XX!XX.action，则在配置文件&lt;action&gt;中需要添加method属性，且值是XX，Action类也必须有XX方法。还有该方法必须是post提交的
不知道您是不是这个意思&lt;/action&gt;

1 楼 uestc2510 2009-11-09  

楼主你好，我在Struts2中使用Uploadify组件上传文件遇到了问题，配置项'script':'xx.action',但是debug是怎么也进不了Action,（说明一下Struts2的配置是没问题的，因为我不用Uploadify组件直接上传时成功了的），请问是什么原因？