首页 > 代码库 > jquery文件批量上传控件Uploadify3.2(java springMVC)
jquery文件批量上传控件Uploadify3.2(java springMVC)
人比较懒 实用为主 不怎么排版了
先放上Uploadify的官网链接:http://www.uploadify.com/ -->里面可以看到PHP的示例,属性说明,以及控件下载地址。分flash版(免费)和html5版(收费)。
官网上可以看到效果演示。
另外在网上找到了一份Uploadify3.2的中文API文档,可以在我上传的资源里面下载。
下面就是一个基于springMVC的文件上传示例,看起来可能比文档更直观一些···
1.下载插件放到项目中
2.在jsp页面中引入以下JS和CSS
<script type="text/javascript" src=http://www.mamicode.com/"${ctxStatic}/uploadify/jquery.uploadify.min.js"></script>>3.jsp页面中创建展示DIV和操作按钮
</pre><pre name="code" class="html"><form> <div id="queue"></div><!-上传队列展示区--> <input id="file_upload" name="file_upload" type="file" multiple="true"><!-批量上传按钮--> </form>4.编辑js代码
$(document).ready(function() { $("#file_upload").uploadify({ 'swf' : '${ctxStatic}/uploadify/geo_fileUpload.swf',//控件flash文件位置 //后台处理的请求(也就是action请求路径),后面追加了jsessionid,用来标示使用当前session(默认是打开新的session,会导致存在session校验的请求中产生302错误) 'uploader' : '${ctx}/testFu;jsessionid=${pageContext.session.id}', 'queueID' : 'queue',//与下面HTML的div.id对应 'width' : '100',//按钮宽度 'height' : '32',//按钮高度 'fileTypeDesc' : '指定类型文件', 'fileTypeExts' : '*.jpg;*.png', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc 'fileObjName' : '"uploadify"', 'buttonText' : '批量上传',//上传按钮显示内容,还有个属性可以设置按钮的背景图片 'fileSizeLimit' : '100KB', 'multi' : true, 'overrideEvents' : [ 'onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError' ],//重写默认方法 'onFallback' : function() {//检测FLASH失败调用 alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。"); }, //以下方法是对应overrideEvents的重载方法,具体实现是网上找到的一个别的朋友的代码, //我把这些方法抽到了一个自定义js中,我会在最后面贴出来 'onSelect' : uploadify_onSelect, 'onSelectError' : uploadify_onSelectError, 'onUploadError' : uploadify_onUploadError, 'onUploadSuccess' : uploadify_onUploadSuccess }); });5.controller类的方法
@ResponseBody @RequestMapping(value = http://www.mamicode.com/"testFu")>
6.附录摘自网上的重载方法列表,我做了一些改动使之更实用(感谢网络无名高手)var uploadify_onSelectError = function(file, errorCode, errorMsg) { var msgText = "上传失败\n"; switch (errorCode) { case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: // this.queueData.errorMsg = "每次最多上传 " + // this.settings.queueSizeLimit + "个文件"; msgText += "上传的文件数量已经超出系统限制的" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "个文件!"; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: msgText += "文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小!"; break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: msgText += "文件大小为0"; break; case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: msgText += "文件格式不正确,仅限 " + this.settings.fileTypeExts; break; default: msgText += "错误代码:" + errorCode + "\n" + errorMsg; } alert(msgText); }; var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) { // 手工取消不弹出提示 if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) { return; } var msgText = "上传失败\n"; switch (errorCode) { case SWFUpload.UPLOAD_ERROR.HTTP_ERROR: msgText += "HTTP 错误\n" + errorMsg; break; case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL: msgText += "上传文件丢失,请重新上传"; break; case SWFUpload.UPLOAD_ERROR.IO_ERROR: msgText += "IO错误"; break; case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR: msgText += "安全性错误\n" + errorMsg; break; case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: msgText += "每次最多上传 " + this.settings.uploadLimit + "个"; break; case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED: msgText += errorMsg; break; case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND: msgText += "找不到指定文件,请重新操作"; break; case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED: msgText += "参数错误"; break; default: msgText += "文件:" + file.name + "\n错误码:" + errorCode + "\n" + errorMsg + "\n" + errorString; } alert(msgText); } var uploadify_onSelect = function() { }; var uploadify_onUploadSuccess = function(file, data, response) { alert("保存每个文件上传后台返回的相关信息,在onQueueComplete方法中展示"); }; var uploadify_onQueueComplete = function(){ alert("全部完成-->并展示提示信息"); }
到此Uploadify的文件批量上传就OK了。 有疑问可以留言咱们一起讨论。这个控件很简单花时间看的话都能弄懂。写这个文章的目的也是为了让大家更快上手,节省宝贵时间
jquery文件批量上传控件Uploadify3.2(java springMVC)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。