`
gaoyu
  • 浏览: 269646 次
  • 来自: 云南大理
社区版块
存档分类
最新评论

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

jqueryhtmljavascriptstruts 
阅读更多

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



效果图

  • 大小: 23.8 KB
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 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下，按照下面的写法，是没有问题的
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下面多文件上传的完整例子发个新帖出来。或者发邮件给我kissme-101@163.com，急用，谢谢

如果没有进入action方法，肯定是配置文件的问题了，不妨贴出来看看。这个项目是研究项目，我不方便贴全代码的
12 楼 kevin030501210 2009-11-17   引用
楼主你好，我的控制台显示错误。说找不到action或者action里没有result，我断点断不到，明显是没进入action，不知道哪里错误，搞了一天半了，能不能把你struts2下面多文件上传的完整例子发个新帖出来。或者发邮件给我kissme-101@163.com，急用，谢谢
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组件直接上传时成功了的），请问是什么原因？
分享到：
| 不为人知的JS调用样式的方法---document.cr ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics