Struts2中使用uploadify上传文件组件

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代码 　　　　 　　[1b][/1b] div.demo { padding: 20px; border: 1px solid #E5E5E5; margin-bottom: 20px; background-color: #FFFFFF; } [1b][/1b] div.demo { padding: 20px; border: 1px solid #E5E5E5; margin-bottom: 20px; background-color: #FFFFFF;} 　　Js代码 　　　　 　　  $(document).ready([1b]function[/1b]() { $("#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' : [1b]false[/1b], 'multi' : [1b]true[/1b], '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代码 　　　　 　　[1b][/1b] [1b][/1b]文件上传[1b][/1b] [1b][/1b] [1b][/1b]开始上传[1b][/1b] | [1b][/1b]清除队列[1b][/1b] [1b][/1b] 文件上传开始上传 | 清除队列 　　解释： 　　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代码 　　　　 　　[1b]private[/1b] File upload;//和HTML中input标记name同名 [1b]private[/1b] String uploadFileName;//Struts2拦截器获得的文件名 [1b]public[/1b] [1b]void[/1b] setUpload(File upload) { [1b]this[/1b].upload = upload; } [1b]public[/1b] [1b]void[/1b] setUploadFileName(String uploadFileName) { [1b]this[/1b].uploadFileName = uploadFileName; } [1b]public[/1b] String uploadFile() [1b]throws[/1b] Exception { //省略数据处理步骤 upload.renameTo([1b]new[/1b] File(realURL)); //省略数据库写入步骤 [1b]return[/1b] "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"; } 评论
暂无评论