jquery文件批量上传控件Uploadify3.2(java springMVC)
来源:互联网 发布:微信拦截域名解决方案 编辑:程序博客网 时间:2024/05/02 02:49
人比较懒 实用为主 不怎么排版了
先放上Uploadify的官网链接:http://www.uploadify.com/ -->里面可以看到PHP的示例,属性说明,以及控件下载地址。分flash版(免费)和html5版(收费)。
官网上可以看到效果演示。
另外在网上找到了一份Uploadify3.2的中文API文档,可以在我上传的资源里面下载。
下面就是一个基于springMVC的文件上传示例,看起来可能比文档更直观一些···
1.下载插件放到项目中
2.在jsp页面中引入以下JS和CSS
<script type="text/javascript" src="${ctxStatic}/uploadify/jquery.uploadify.min.js"></script><link type="text/css" rel="stylesheet" href="${ctxStatic}/uploadify/uploadify.css">
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' : 'myTestFile',//文件对象名称,用于后台获取文件对象时使用,详见下面的java代码'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类的方法
<pre name="code" class="html">@ResponseBody@RequestMapping(value = "testFu")
//这里的<span style="font-family: Arial, Helvetica, sans-serif;">creativeFile与上面jsp空间中的</span><span style="font-family: Arial, Helvetica, sans-serif;">creativeFile对应</span><span style="font-family: Arial, Helvetica, sans-serif;"></span>public String testUpload(MultipartFile creativeFile, HttpServletResponse response) {System.out.println(creativeFile.getName());System.out.println(creativeFile.getOriginalFilename());System.out.println(creativeFile.getSize());return "测试测试";// 返回给前台的提示信息}
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了。 有疑问可以留言咱们一起讨论。这个控件很简单花时间看的话都能弄懂。写这个文章的目的也是为了让大家更快上手,节省宝贵时间
5 3
- jquery文件批量上传控件Uploadify3.2(java springMVC)
- jquery文件批量上传控件Uploadify3.2(java springMVC)
- uploadify3.2 jquery上传组件
- asp.net 文件批量选取,批量上传,带进度条,uploadify3.2
- jQuery uploadify3.2 上传组件bug
- springmvc+uploadify3.2
- jQuery-uploadify3.2带有滚动条的文件上传
- jquery uploadify3.2 bug
- jQuery uploadify3.2使用
- springMVC+uploadify3.1 文件上传 demo
- Spring+SpringMVC 文件批量同步上传
- SpringMvc+Angularjs 多文件批量上传
- java操作文件批量上传
- uploadify3.2+struts2文件上传
- spring mvc+jquery uploadify3.1上传
- jquery插件uploadify3.1 上传组件
- jquery-uploadify3.2使用心得
- SpringMVC+Ajax文件批量上传和下载
- mysql命令行的导入和导出数据库操作
- 互联网全民创业:95%电商活得很痛苦
- 用JPG转PDF转换器把图片制作成PDF格式文档
- IP查询接口
- Eclipse搭建Android开发环境(安装ADT,Android4.4.2)
- jquery文件批量上传控件Uploadify3.2(java springMVC)
- HTML学习笔记----布局和表格
- Pig的简单使用介绍
- 小试iSCSI多路径( by quqi99)
- Java中break的作用
- 常用IP地址查询接口
- selenium python中关于iframe的定位
- 把现有Unity3d游戏向Windows Phone 8.1移植(基础)
- Centos 6.5 下通过ethtool限制网卡速率