Uploadify是一个基于Jquery的文件上传组件,官网http://www.uploadify.com/能够在官网得到该组件,运行演示示例,下载帮助文档。
做为Web前端的加强技术,Jquery给用户以更好的体验和交互,加强富互联网客户端特效,而基于Jquery的Uploadify更是将文件上传效果发挥到极致。 javascript
1.支持的文件
jquery.js,jquery.uploadify.js,uploadify.css;
2.HTML页面源码 css
<style type="text/css"> div.demo { padding: 20px; border: 1px solid #E5E5E5; margin-bottom: 20px; #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源码 html
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"; }
效果图
前端