Struts2中使用uploadify上传文件组件
2009年11月20日
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代码
[/b] div.demo { padding: 20px; border: 1px solid #E5E5E5; margin-bottom: 20px; background-color: #FFFFFF; } [b] div.demo { padding: 20px; border: 1px solid #E5E5E5; margin-bottom: 20px; background-color: #FFFFFF;}
Js代码
$(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 }); }); $(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 });});
Html代码
[/b] [b]文件上传[/b] [b] [/b]开始上传[b] | [/b]清除队列[b] [/b] 文件上传开始上传 | 清除队列
解释:
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代码
[b]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"; }
发表评论
-
WebKit介绍及总结(一)
2012-01-20 01:15 650WebKit介绍及总结(一) 201 ... -
红黑树算法的实现与剖析
2012-01-20 01:15 575红黑树算法的实现与剖析 2011年03月28日 学无止境 ... -
深入static_cast运算符
2012-01-20 01:15 635深入static_cast运算符 2011年03月29日 ... -
动态规划算法
2012-01-20 01:15 675动态规划算法 2011年03 ... -
GPGPU将取代CPU?抢CPU “饭碗”
2012-01-20 01:15 624GPGPU将取代CPU?抢CPU “饭碗” 2011年03月 ... -
2011-3-25
2012-01-19 09:04 9262011-3-25 2011年03月25日 服务站会员注 ... -
WinCE驱动开发问题精华集锦(一)
2012-01-17 01:34 552WinCE驱动开发问题精华 ... -
关键字:volatile
2012-01-17 01:33 641关键字:volatile 2011年03月31日 并不是 ... -
bios英汗翻译
2012-01-17 01:33 619bios英汗翻译 2011年05月2 ... -
volatile――多线程
2012-01-17 01:33 523volatile――多线程 2011 ... -
计算机基础选择题(2)
2012-01-17 01:33 1552计算机基础选择题(2) 20 ... -
Apache Commons fileUpload实现文件上传(一)
2012-01-15 20:19 718Apache Commons fileUpload实现文件上传 ... -
mp3音乐文件上传外链空间精选合辑
2012-01-15 20:19 1041mp3音乐文件上传外链空 ... -
dwr+ajax和struts开发文件上传进度条
2012-01-15 20:19 845dwr+ajax和struts开发文件上传进度条 2010年 ... -
使用apache commons-fileupload.jar 实现文件上传
2012-01-15 20:19 694使用apache commons-fileupload.jar ... -
Shadowing, Overriding, Hiding and Obscuring
2012-01-11 12:22 758Shadowing, Overriding, Hiding a ... -
1154_java
2012-01-11 12:22 6491154_java 2011年03月01日 impor ... -
Java 开发人员的 Scala 指南: 面向对象的函数编程
2012-01-11 12:22 603Java 开发人员的 Scala 指南: 面向对象的函数编程 ... -
Commons Pool组件
2012-01-11 12:22 685Commons Pool组件 2011年03 ... -
IT生活的血泪史
2012-01-11 12:22 563IT生活的血泪史 2011年03 ...
相关推荐
struts2 +jquey uploadify3 2 实现多文件上传 可以运行的myeclipse工程 绝对好用 访问方式http: 127 0 0 1:8080 Struts2Uploadify upload jsp uploadify 使用说明: <a href "javascript:$ "#file ...
struts2 uploadity
struts2 + uploadify上传文件示例
MVC4下对话框中使用Uploadify上传多个文件
struts1 uploadify 多文件上传
1 判断session是否失效 本实例没测试这个问题 但在工作项目中碰到了 但原因在这里记录下:web应用会存在一个session 而uploadify上传时也会产生一个新的session 导致在后台判断session是否失效时获取的session为null...
使用struts2和uploadify(2.1.4)开发的文件上传插件
代码使用Struts2框架和uploadify插架实现多文件上传功能。
利用struts2框架实现uploadidfy多文件上传,显示进度条上传
struts2 +jquey uploadify3.2 实现多文件上传,可预览、删除、排序 http://blog.csdn.net/ht99582/article/details/9190701
该资源包含了一个使用uploadify组件上传文件的简单demo,喜欢的下载。
Uploadify结合Struts2上传demo
uploadify多文件上传例子代码,jsp+servlet实现
uploadify多文件上传Demo整理,客户端操作,后台异步提交
struts2结合uploadify3.2实现上传进度条,可控文件大小
uploadify3.1与Struts2配合使用。代码运行完美无错,upload因为版本问题,开发者的方法总是运行不起来,这个与Struts2结合的可以成功运行。
uploadify-2.1.4多文件上传组件的使用说明整理
HTML5 PHP jquery uploadify上传文件,带进度条,author:吕大豹。仿照uploadify写的,www.codesc.net已做过修正,本例的配置参数均与uploadify官网一致,参照官网的api就可以了,直接把文件夹上传到支持php的服务器...
程序进过本人亲测,附件中含SQL,用的是MySQL数据库,实现了带进度条的多文件上传,并提供下载功能,解压后可直接导入Eclipse,希望对你有所帮助。
uploadify多文件上传