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

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

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

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

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

效果图

• 
• 大小: 23.8 KB

• 查看图片附件

19
顶

1
踩

分享到：

增强型表格/报表-jqGrid使用浅析

• 2009-10-14 20:45
• 浏览 12483
• 评论(30)
• 收藏
• 分类:Web前端
• 相关推荐

评论

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 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的写入，但报异常终究不是好事。这个问题困扰了我好几天，请楼主帮忙。不知你有没有遇到过这个异常情况。

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

15 楼 sarin 2009-11-19   引用

NemoLee 写道

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

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

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

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

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

'script'         : '${base}/file/file!update.action',
'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下，按照下面的写法，是没有问题的

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

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

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

'script'         : '${base}/file/file!update.action',
'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下面多文件上传的完整例子发个新帖出来。或者发邮件给我[e-mail]，急用，谢谢

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

12 楼 kevin030501210 2009-11-17   引用

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

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组件直接上传时成功了的），请问是什么原因？