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文件里,看不到代码,所以这条路不行. ...
随机推荐
- C++/C#/java开发支持求解
本人大一学C语言,大二学VB,大三学VC,毕业后工作前两年用C++,接着两年用C#,最近几个月Android开发用Java. 以下本人总结以下,有些疑惑希望大师帮忙解答. 1. C语言,精简,灵活,适 ...
- Redis: OOM command not allowed when used memory > ‘maxmemory
Redis: OOM command not allowed when used memory > ‘maxmemory’ 解决方式: $ vim /etc/redis/6903.conf ma ...
- lettCode-Array
1 Remove Element lintcode-172 描述: 删相同元素,反现有长度 记忆:标不同元素,反标记值 public int removeElement(int[] a, i ...
- [Javascript] Fetch API
fetch() does the same thing as XHR, but fetch return a promise. fetch('password.txt', { 'method': 'P ...
- [React] React Fundamentals: Accessing Child Properties
When you're building your React components, you'll probably want to access child properties of the m ...
- oralce表空间自增长占满磁盘
取消表空间自动增长 SELECT FILE_NAME,TABLESPACE_NAME,AUTOEXTENSIBLE,bytes/1024/1024/1024 FROM dba_data_files; ...
- git设计哲学
刚开始使用git的时候,总想拿git来和cvs或者svn来作对比,但不久后发现这个想法本身就是错的,git完全就是另外一种物种,一种本属于未来的物种.它的对象存储方式,快照,分支等,都是完全不同的. ...
- C++学习(一)
一.C++语言语法基础(6)1.从C到C++的过渡(1)2.类和对象(2)剑3.操作符重载(1)4.继承与多态(1)5.异常和I/O流(1)二.数据结构和算法(3)1.基本数据结构,堆栈.队列.链表. ...
- jbpm4 回退、会签、撤销、自由流
http://blog.csdn.net/xiaozhang0731/article/details/8699558 1. jBPM4的特点 jBPM是JBoss众多开源项目中的一个工作流开源项目,也 ...
- datejs lib
// Get today's date Date.today(); // Add 5 days to today Date.today().add(5).days(); // Get Friday o ...