KindEditor编辑器图片批量上传采用了上传插件swfupload.swf,所以后台上传文件方法返回格式应为JSONObject的String格式(注)。

JSONObject格式:

JSONObject obj = new JSONObject();
obj.put("error", 0);//0:上传文件成功,1:上传文件失败
obj.put("url", "这里是图片路径,多张图采用英文逗号分隔“,”");

代码示例:

/**
* 文件上传公共方法
*
* @param response
* @param request
* @param imgFile
* 单文件
* @return
*/
public Map<String, Object> uploadImg(HttpServletResponse response, HttpServletRequest request,
MultipartFile imgFile) {
response.setContentType("text/plain;charset=UTF-8");
Map<String, Object> map = Maps.newHashMap();
// 文件保存目录URL
String saveUrl = "upload/img/";
// 最大文件大小
long maxSize = 102400000; if (imgFile == null) {
return returnErrorMap("请选择文件!");
}
String imgFileFileName = imgFile.getOriginalFilename();
String fileType = imgFileFileName.substring(imgFileFileName.lastIndexOf(".") + 1).toLowerCase();// 文件类型
Map<String, String> fileTypeMap = Maps.newHashMap();
fileTypeMap.put("image", "gif,jpg,jpeg,png,bmp");
if (fileTypeMap.containsKey(fileType)) {
return returnErrorMap("上传文件扩展名[" + fileType + "]是不允许的扩展名。");
}
if (imgFile.getSize() > maxSize) {
return returnErrorMap(
"[ " + imgFileFileName + " ]超过单个文件大小限制,文件大小[ " + imgFile.getSize() + " ],限制为[ " + maxSize + " ] ");
}
String newFileName = System.currentTimeMillis() + "." + fileType;// 重新命名
try {
FileUtils.copyInputStreamToFile(imgFile.getInputStream(), new File(saveUrl, newFileName));// 生成文件
return map;
} catch (Exception e) {
return returnErrorMap("图片上传失败");
}
} /**
*
* @param response
* @param request
* @param imgFiles
* 多文件
* @return
*/
@RequestMapping("/upload")
public @ResponseBody String uploadImgs(HttpServletResponse response, HttpServletRequest request,
@RequestParam("imgFiles") MultipartFile[] imgFiles) {
response.setContentType("text/plain;charset=UTF-8");
String url = "";
JSONObject obj = new JSONObject();// 必须返回json格式否则swfupload.swf无法解析报错
try {
for (MultipartFile myFile : imgFiles) {
Map imgPath = uploadImg(response, request, myFile);// 上传方法
if (imgPath.get("error").equals("0")) {
url += imgPath + ",";
}
}
obj.put("error", 0);// 上传成功
if (url.length() > 0) {
obj.put("url", url.substring(0, url.length() - 1)); // 上传成功的所有的图片地址的路径
} else {
obj.put("url", url);
}
} catch (Exception e) {
e.printStackTrace();
obj.put("error", 1);// 上传失败
obj.put("url", url);
}
return obj.toString();
} /**
* 错误提示
*
* @param message
* @return
*/
private Map<String, Object> returnErrorMap(String message) {
Map<String, Object> map = Maps.newHashMap();
map.put("error", 1);
map.put("message", message);
return map;
}

jQuery调用:

$(function (){
KindEditor.ready(function(K) {
var editor1 = K.create("textarea[name='content_body']", {
uploadJson : '../kindeditor/upload',//后台上传调用方法地址,返回json格式
afterCreate : function() {
var self = this;
},
afterBlur: function(){this.sync();}
});
});
});

效果图:

KindEditor图片批量上传的更多相关文章

  1. [转]Kindeditor图片粘贴上传(chrome)

    原文地址:https://www.cnblogs.com/jsper/p/7608004.html 首先要赞一下kindeditor,一个十分强大的国产开源web-editor组件. kindedit ...

  2. OneThink实现多图片批量上传功能

    OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的,默认是只能上传一张图片的,但是uploadify.swf是支持多图片批量上传的,那么我们稍加改动就可实现OneThi ...

  3. asp.net+swfupload 多图片批量上传(附源码下载)

    asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教 ...

  4. 利用WebUploader进行图片批量上传,在页面显示后选择多张图片压缩至指定路径【java】

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...

  5. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  6. Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  7. Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  8. JAVA图片批量上传JS-带预览功能

    这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...

  9. webuploader 实现图片批量上传

    1.导入资源 2.JSP代码 <div class="page-container"> <div class="row cl"> < ...

随机推荐

  1. JAVA定时器实现之一(通过继承TimerTask)

    在某些时候, 我们需要实现这样的功能,某一程序隔一段时间执行一次,而这一事情由系统本身来完成,并不是人为的触发,我们一般可称此为定时器任务. 这类技术主要应用到那些需要进行后台整理数据的系统中,比如说 ...

  2. SourceTree工具进行提交合并代码步骤

    1.先安装SourceTree工具. beyong compare工具 2.在 SourceTree工具加载beyong compare插件 1.工具.选项.比较 2.就是修改.gitconfig文件 ...

  3. kernel 模块与简单 hello 模块

    Kernel 模块与简单 hello 模块 kernel 模块的简介 Linux 内核进行扩展时,例如编写驱动程序.netfilter功能等,最方便的方式是通过编写模块,然后加载到内核中.由于 ker ...

  4. 使用Storm实现实时大数据分析

    摘要:随着数据体积的越来越大,实时处理成为了许多机构需要面对的首要挑战.Shruthi Kumar和Siddharth Patankar在Dr.Dobb’s上结合了汽车超速监视,为我们演示了使用Sto ...

  5. Android之绚丽的图片游览效果--有点像W7效果,透明的倒影,层叠的图片,渐变的颜色透明度

    这里转载一个牛人的博客:http://www.cnblogs.com/tankaixiong/archive/2011/02/24/1964340.html 下面,是我参照他的博客实现的一个效果图.这 ...

  6. box2dweb之关节joint(连接器)

    1 概述 前篇基础文章看完后基本上就应该对box2dweb能上手了,下面来介绍一下box2dweb非常重要的一个概念,关节(joint)也有叫连接器的,总之是一个意思.下面是关节详细的类库说明: BO ...

  7. oracle启动关闭命令

    关闭:1.shutdown normal 不允许新的连接.等待会话结束.等待事务结束.做一个检查点并关闭数据文件.启动时不需要实例恢复. 2.shutdown transactional不允许新的连接 ...

  8. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  9. JAVA-封装-静态属性

    1.使用 1.static 2.用来修饰属性.方法.内部类.代码块 3.称为类属性,静态属性,类方法,静态方法 3.不需要实例化,直接用类名或静态成员名调用 2.特点 1.静态属性对于类的所有实例是共 ...

  10. JQuery书写Ajax的几种方式?

    1 $.ajax({ type: "Post", //请求方式 ("POST" 或 "GET"), 默认为 "GET" ...