JQuery上传插件Uploadify
一:官网
http://www.uploadify.com/
二:引用
<link href="plug-in/uploadify3.2.1/uploadify.css" rel="stylesheet" />
<script type="text/javascript" src="plug-in/uploadify3.2.1/jquery.uploadify.min.js"></script>
三:例子
(1)前台页面
<tr> <td align="right"> <label class="Validform_label"> 主题图: </label> </td> <td class="value"> <input id="subjectMap" name="subjectMap" type="hidden" datatype="*" /> <table> <tr> <td> <input type="file" name="upload_org_code" id="upload_org_code"/> </td> <td> <img id="upload_org_code_img" src="" width="216" height="135"> <a id="del" style="display: none;" href="#" onclick="del()">删除</a> </td> </tr> </table> <span class="Validform_checktip">建议尺寸:720*360</span> </td> </tr>
(2)上传JS
setTimeout(function(){ $("#upload_org_code").uploadify({ 'height' : 27, 'width' : 80, 'buttonText' : '图片上传', 'swf' : 'plug-in/uploadify3.2.1/uploadify.swf', 'uploader' : 'rouletteController.do?objUpload', 'auto' : true, 'multi' : false, 'removeCompleted':true, 'removeTimeout' : 1, 'cancelImg' : 'plug-in/uploadify3.2.1/uploadify-cancel.png', 'fileTypeExts' : '*.jpg;*.jpge;*.gif;*.png', 'fileSizeLimit' : '2MB', 'onUploadSuccess':function(file,data,response){ var json = eval('(' + data + ')'); var url=json.attributes.visiturl+json.attributes.fileName; $("#upload_org_code_img").attr("src",url); $("#subjectMap").val(json.attributes.fileName); $("#del").attr("style","display: block;"); }, //加上此句会重写onSelectError方法【需要重写的事件】 'overrideEvents': ['onSelectError', 'onDialogClose'], //返回一个错误,选择文件的时候触发 'onSelectError':function(file, errorCode, errorMsg){ switch(errorCode) { case -110: alert("文件 ["+file.name+"] 大小超出系统限制的" + jQuery('#upload_org_code').uploadify('settings', 'fileSizeLimit') + "大小!"); break; case -120: alert("文件 ["+file.name+"] 大小异常!"); break; case -130: alert("文件 ["+file.name+"] 类型不正确!"); break; } }, }); },10)
(3)上传后台代码
/**** * 图片上传 **/ @RequestMapping(params = "objUpload") @ResponseBody public AjaxJson objUpload(HttpServletRequest request) throws Exception { AjaxJson j = new AjaxJson(); Map<String, Object> attributes = new HashMap<String, Object>(); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Map<String, MultipartFile> fileMap = multipartRequest.getFileMap(); String tomcaturl = PropertiesConfig.getStringConfig("tomcaturl"); String roulette_sub_url = PropertiesConfig.getStringConfig("roulette_sub_url"); String visiturl = PropertiesConfig.getStringConfig("visiturl"); // 创建文件夹 File file = new File(tomcaturl+roulette_sub_url); if (!file.exists()) { file.mkdirs(); } String fileName = null; //String path = null; for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) { // 上传文件名 MultipartFile mf = entity.getValue(); fileName = mf.getOriginalFilename(); String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1) .toLowerCase(); SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = "roulette_" + df.format(new Date()) +"_bak"+ "." + fileExt; File uploadFile = new File(tomcaturl+roulette_sub_url+newFileName); try { FileCopyUtils.copy(mf.getBytes(), uploadFile); fileName = roulette_sub_url+newFileName; } catch (IOException e) { e.printStackTrace(); } } attributes.put("visiturl", visiturl); attributes.put("fileName", fileName); j.setAttributes(attributes); return j; }
JQuery上传插件Uploadify的更多相关文章
- JQuery上传插件uploadify优化
旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
- jquery上传插件uploadify 报错http error 302 解决方法之一
前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改 ...
- 【转】JQuery上传插件Uploadify使用详解及错误处理
转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...
- JQuery上传插件Uploadify使用详解
本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...
- (转)JQuery上传插件Uploadify使用详解
原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...
- jQuery上传插件Uploadify使用帮助
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP, ...
- JQuery上传插件Uploadify使用详解 asp.net版
先来一个实例 Uploadify插件是JQuery的一个文件支持多文件上传的上传插件,ajax异步上传,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadif ...
- 文件上传利器JQuery上传插件Uploadify
在做日常项目中,经常在后台需要上传图片等资源文件,之前使用过几次这个组件,感觉非常好用 ,但是每次使用的时候都是需要经过一番查阅,所以还不如记住在这里,以后使用的时候就翻翻. 他的官方网站如下:htt ...
- jQuery上传插件Uploadify 3.2在.NET下的详细例子
项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能,特此记下来,以供各位参考! Uploadify下载地址:http://www.uploadify.com/download/ 下 ...
- JQuery上传插件Uploadify详解及其中文按钮解决方案 .
Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文,因为插件在js里用了一个转码方法把这个参数的值转过码了,解码的地方在那个swf文件里,看不到代码,所以这条路不行. ...
随机推荐
- sql server smo
在SQL Server2005以前的版本中,SQL分布式管理对象(SQL-DMO)为我们提供了非常有效的方法来通过编程的方式管理SQL Server.SQL-DMO支持基于COM的接口,开发人员可以通 ...
- Win+R指令(2)
1. gpedit.msc-----组策略 2. sndrec32-------录音机 3. Nslookup-------IP地址侦测器 ,是一个 监测网络中 DNS 服务器是否能正确实现域名解析的 ...
- 恼人的Visual Studio 2010崩溃重启问题
上周时Visual Studio 2010突然出现崩溃现象.在源文件修改只要一编译,马上就崩溃,而且还不弹出任何异常窗口,严重影响软件开发工作. google了无数解决方案 试了下面这些方法: 1)h ...
- 三目运算符 改变<a>标签的class属性
<s:iterator value="funcList" status="status" id="bean"> <a id ...
- Java-日历表
效果图 import java.util.*; import java.text.*; class demo { public static void main(String[] args) { // ...
- cocos2d-x 屏幕适配新解
转自:http://blog.leafsoar.com/archives/2013/05-10-19.html 为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 cocos2d-x(当前稳定版:2 ...
- Unityclient通信測试问题处理(二)
Unityclient通信測试问题处理(二) 在client的通信測试过程中.场景载入的问题给自己带来了不小的麻烦.由于消息的解析方法在单独的监听线程中调用,这也就意味着无法在消息的解析方法中调用Un ...
- linux下启动某个进程
在关闭窗口的情况下,能够在后台继续运行,如 启动命令 node /home/node_modules/pixel-ping/lib/pixel-ping.js /home/node_modules/p ...
- mysql 5.6 oom 图
- Mac system快捷键
官方的快捷键是 control+command+F 进行窗口和全屏的切换. 1042282500@qq.com yss12313