jQuery uploadify 3.2
感谢原创 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就是传完了