感谢原创 http://18810098265.iteye.com/blog/1972538
uploadify目前最新版是3.2.1, 官网上介绍的资料是使用index.php,而没有介绍在jsp上的上传, 在网上搜到的资料是关于版本较低的,跟这个版本用法不一样了, 下载后解压就是这样:
项目中的结构
1.jsp上引入css和js, uploadify还需要引入jquery
<head> <link href="../uploadify/uploadify.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../control/jquery-1.9.0.min.js" ></script> <script type="text/javascript" src="../uploadify/jquery.uploadify.min.js"></script> </head> <body> <input type="file" id="uploadify" name="uploadify"> <div id="fileQueue"></div> <a href="javascript:$('#uploadify').uploadify('upload','*')">开始上传</a> <a href="javascript:$('#uploadify').uploadify('cancel')">取消所有上传</a> </body>
2.页面上的js, 在页面加载的时候执行
<script type="text/javascript"> window.onload=function(){ upVideo(); } function upVideo(){ $("#uploadify").uploadify({ 'auto' : false, //选完文件后是否自动上传 'swf' : '../uploadify/uploadify.swf', //引入uploadify.swf 'uploader' : 'struts2的action请求路径',//请求路径 'queueID' : 'fileQueue',//队列id,用来展示上传进度的 'queueSizeLimit' : 3, //同时上传文件的个数 'fileTypeDesc' : '视频文件', 'fileTypeExts' : '*.avi;*.rmvb;*.wmv;*.mp4', //控制可上传文件的扩展名 'multi' : true, //允许多文件上传 'buttonText' : '上传视频',//按钮上的文字 'fileSizeLimit' : '200MB', //设置单个文件大小限制 'fileObjName' : 'uploadify', //<input type="file"/>的name 'method' : 'post', 'removeCompleted' : true,//上传完成后自动删除队列 'onUploadSuccess' : function(file, data, response){//单个文件上传成功触发 //data就是action中返回来的数据 文件传上去后,你可以把文件的名称等信息写回来, 把值赋给隐藏的input,再提交过去将文件的路径等其他信息存到数据库,实现异步上传,而且你还可以在这里动态创建一个删除按钮, 点击时发送ajax请求,把文件名发送过去,把刚上传的视频删了 }, 'onQueueComplete' : function(){//所有文件上传完成 } }); }
3,完成上面两步, 而且你的浏览器安装了flash插件,会有如下效果
这里有点小问题, 我的队列上有个X可以点击,你的可能没有,但是还是可以点,也能取消,就是少了个X图标,这应该是这个版本的一个bug,解决办法:
打开uploadify.css, 查找"uploadify-queue-item", 我的是在73行,如下:
.uploadify-queue-item .cancel a { background: url('../img/uploadify-cancel.png') 0 0 no-repeat; float: right; height: 16px; text-indent: -9999px; width: 16px; }
把url('../img/uploadify-cancel.png')这个改成url('uploadify-cancel.png'), 因为这个uploadify-cancel.png文件和css文件在同一个目录下,'../img/uploadify-cancel.png'找不到图片所以页面上没有X
5,当你选择的文件大小超出范围,uploadify会弹出提示,但提示是英文的,提示"The File..."什么的,解决办法是直接打开jquery.uploadify.js(你引得是jquery.uploadify.min.js就打开jquery.uploadify.min.js), 搜索"The File" 直接把相应英文替换为中文即可,反正提示什么英文你就搜什么呗,然后改, 注意清缓存,我清了好几遍才出来中文.
6.struts2的配置
这个不多说什么, 注意一点, 一定加上这个常量,不然超过2M的文件就传不了,队列里会报错
Http Error 404神马的
<constant name="struts.multipart.maxSize" value="2000000000" ></constant>
7.action代码
//三个接收文件的字段,与页面上的name,uploadify的'fileObjName'属性一致 private File uploadify; private String uploadifyFileName; private String uploadifyContentType; //我是以当前时间+"__"+文件名作为新的文件名放到项目的videos文件夹中 public void uploadVideo() throws Exception{ ServletContext context = ServletActionContext.getServletContext(); String savePath = context.getRealPath("/videos"); HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); String name = new Date().getTime()+"__"+uploadifyFileName; savefile(uploadify,savePath,name,10485760); uploadify.delete();//删除临时文件,tomcat的work目录下会有临时文件,得删掉 response.getWriter().print(name);//把新的文件名发回到页面,用个隐藏的input标签记下这个文件名,等页面提交的时候把这个文件名再带过来,加上路径,就是视频的路径存到数据库 } //保存文件 public boolean savefile(File file, String path, String filename, int size) { boolean bool = true; try { InputStream is = new FileInputStream(file); OutputStream os = new FileOutputStream(path + "\\" + filename); byte[] bytefer = new byte[size]; int length = 0; while ((length = is.read(bytefer)) != -1) { os.write(bytefer, 0, length); } os.close(); is.close(); } catch (Exception e) { bool = false; } return bool; }
到这里,就已经完成了视频的上传, 只不过上传完了, 我发现我传错了, 我想把刚才传的视频删了, 这个怎么搞了?我已经在js中留了两个回调函数,第一个回调函数就可以实现
第二个回调函数可以干嘛了?它是在所有文件传完了触发,所以利用它可以阻止下面这种情况:文件还正在上传,别人就要提交表单, 这时你应该提示文件正在上传,请稍后提交, 所以你可以再页面弄个隐藏的input,值是0, 然后在这个回调函数中将值改为1, 然后提交的时你就判断这个值, 是0就是还没传完,1就是传完了
相关推荐
《使用Jquery Uploadify3.2在Springside4中实现文件上传详解》 在现代Web应用中,文件上传功能是不可或缺的一部分。本篇文章将详细讲解如何在Springside4框架下利用Jquery的Uploadify插件实现文件上传功能。...
今天我要给大家介绍额就是一款jQuery的无刷新上传插件 -UploadifyjQuery 上传插件Uploadify3.2最新版本中文实用手册,对于该插件的属性方法进行详细讲解官方地址:http://w 资源太大,传百度网盘了,链接在附件中,...
【jQuery Uploadify 3.2在Struts2中的应用】 jQuery Uploadify 3.2是一个流行的前端文件上传插件,它允许用户通过Ajax技术实现异步、多文件上传功能,大大提升了用户界面的交互性和用户体验。这个完整的工程是将...
Uploadify3.2Demo是一个基于jQuery的文件上传插件,专为实现高效、便捷的多文件上传功能而设计。在Web开发中,尤其是在用户需要上传大量或者多个文件时,这样的工具变得至关重要。Uploadify3.2是这个插件的一个特定...
在本文中,我们将深入探讨如何在ASP.NET环境中利用jQuery Uploadify 3.2插件实现文件上传功能。jQuery Uploadify是一款流行的JavaScript库,它提供了一种直观、用户友好的方式来处理多文件上传,适用于各种Web应用...
- `jquery.uploadify.js` 和 `jquery.uploadify.min.js`:这是jQuery插件的主要脚本文件,包含Uploadify的逻辑代码,`min.js`是压缩版,用于生产环境以减少加载时间。 - `index.php`:示例页面,展示了如何在实际...
**jQuery Uploadify 3.2 中文详细参考手册** jQuery Uploadify是一款强大的、无刷新的文件上传插件,它使得用户在网页上进行文件上传时无需等待页面刷新,极大地提升了用户体验。Uploadify 3.2版本是其发展过程中的...
《jQuery插件uploadify3.2深度解析》 在当今的Web开发中,用户交互体验是至关重要的一环,其中文件上传功能是常见的需求之一。jQuery作为JavaScript库的翘楚,其丰富的插件生态为开发者提供了便利。Uploadify,便是...
jquery+uploadify3.2实现多文件上传并且有进度(IE,FF,Google浏览器兼容),本人已经通过IE,火狐,google浏览器测试通过了。将项目直接导入myeclipse下就可以直接运行!(IE,FF,Google浏览器兼容) 附件大小...
Uploadify3.2中文详细参考手册提供了全面的配置选项和事件处理,使得开发者能够灵活地定制上传过程。 配置选项是Uploadify的核心部分,允许开发者对上传行为进行精确控制。例如,`auto`选项决定了在选择文件后是否...
《uploadify3.2Demo.rar》是一个包含上传插件示例的压缩包,主要用于演示Uploadify 3.2版本的功能。Uploadify是一款基于jQuery的文件上传插件,它提供了丰富的自定义选项和交互效果,使得文件上传过程更加友好和高效...
Uploadify3.2参数详解,最新的jQuery Uploadfy文档。
次压缩包除官方所提供的uploadify3.2包含文件外,还有JQUERY的基础库(jquery-1.8.0.min.js),以及(swfobject.js)组件,这两个文件在使用uploadify3.2组件时也是必须引入的,为了方便,所以将其都压缩到一起,供...
Uploadify是一款广受欢迎的jQuery插件,主要用于实现网页上的文件上传功能。它的版本3.2在当时具有较高的稳定性和良好的用户交互体验,因此备受开发者喜爱。在这个教程中,我们将深入探讨Uploadify 3.2的核心特性、...
通常包括`uploadify.css`、`jquery.uploadify.v3.2.min.js`等文件。 2. **HTML结构**:在网页中创建一个`<input type="file">`元素,作为uploadify的触发元素。然后使用jQuery来初始化uploadify,设置相应的属性,...
这个压缩包"uploadify3.2_Java_Servlet_多文件.zip"包含了一个使用Uploadify与Java Servlet结合的示例,用于处理多文件上传的场景。在本文中,我们将深入探讨Uploadify、Java Servlet以及如何将它们整合在一起实现...
之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,FireFox 不能正常上传。经过反复研究学习,之所以firefox和360浏览器无法正常运行,是因为FireFox、chrome、360浏览器等支持HTML5的浏览器不会再文件上传...
在"struts2 +jquey uploadify3.2 实现多文件上传,可预览、删除、排序"这个项目中,开发者使用了Uploadify 3.2版本,这是一个支持异步上传和批量上传的插件,能够很好地与Struts2框架整合。以下是实现这一功能的关键...