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

JSONObject格式:

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

代码示例:

  1. /**
  2. * 文件上传公共方法
  3. *
  4. * @param response
  5. * @param request
  6. * @param imgFile
  7. * 单文件
  8. * @return
  9. */
  10. public Map<String, Object> uploadImg(HttpServletResponse response, HttpServletRequest request,
  11. MultipartFile imgFile) {
  12. response.setContentType("text/plain;charset=UTF-8");
  13. Map<String, Object> map = Maps.newHashMap();
  14. // 文件保存目录URL
  15. String saveUrl = "upload/img/";
  16. // 最大文件大小
  17. long maxSize = 102400000;
  18.  
  19. if (imgFile == null) {
  20. return returnErrorMap("请选择文件!");
  21. }
  22. String imgFileFileName = imgFile.getOriginalFilename();
  23. String fileType = imgFileFileName.substring(imgFileFileName.lastIndexOf(".") + 1).toLowerCase();// 文件类型
  24. Map<String, String> fileTypeMap = Maps.newHashMap();
  25. fileTypeMap.put("image", "gif,jpg,jpeg,png,bmp");
  26. if (fileTypeMap.containsKey(fileType)) {
  27. return returnErrorMap("上传文件扩展名[" + fileType + "]是不允许的扩展名。");
  28. }
  29. if (imgFile.getSize() > maxSize) {
  30. return returnErrorMap(
  31. "[ " + imgFileFileName + " ]超过单个文件大小限制,文件大小[ " + imgFile.getSize() + " ],限制为[ " + maxSize + " ] ");
  32. }
  33. String newFileName = System.currentTimeMillis() + "." + fileType;// 重新命名
  34. try {
  35. FileUtils.copyInputStreamToFile(imgFile.getInputStream(), new File(saveUrl, newFileName));// 生成文件
  36. return map;
  37. } catch (Exception e) {
  38. return returnErrorMap("图片上传失败");
  39. }
  40. }
  41.  
  42. /**
  43. *
  44. * @param response
  45. * @param request
  46. * @param imgFiles
  47. * 多文件
  48. * @return
  49. */
  50. @RequestMapping("/upload")
  51. public @ResponseBody String uploadImgs(HttpServletResponse response, HttpServletRequest request,
  52. @RequestParam("imgFiles") MultipartFile[] imgFiles) {
  53. response.setContentType("text/plain;charset=UTF-8");
  54. String url = "";
  55. JSONObject obj = new JSONObject();// 必须返回json格式否则swfupload.swf无法解析报错
  56. try {
  57. for (MultipartFile myFile : imgFiles) {
  58. Map imgPath = uploadImg(response, request, myFile);// 上传方法
  59. if (imgPath.get("error").equals("0")) {
  60. url += imgPath + ",";
  61. }
  62. }
  63. obj.put("error", 0);// 上传成功
  64. if (url.length() > 0) {
  65. obj.put("url", url.substring(0, url.length() - 1)); // 上传成功的所有的图片地址的路径
  66. } else {
  67. obj.put("url", url);
  68. }
  69. } catch (Exception e) {
  70. e.printStackTrace();
  71. obj.put("error", 1);// 上传失败
  72. obj.put("url", url);
  73. }
  74. return obj.toString();
  75. }
  76.  
  77. /**
  78. * 错误提示
  79. *
  80. * @param message
  81. * @return
  82. */
  83. private Map<String, Object> returnErrorMap(String message) {
  84. Map<String, Object> map = Maps.newHashMap();
  85. map.put("error", 1);
  86. map.put("message", message);
  87. return map;
  88. }

jQuery调用:

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

效果图:

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. flex box 布局

    .box{ display:flex; } .box { display: inline-flex; } .box { display:-webkit-flex; display: flex; } f ...

  2. UR fall detection dataset

    http://fenix.univ.rzeszow.pl/~mkepski/ds/uf.html

  3. CentOS6.5Minimal安装Gitlab7.5

    文章出处:http://www.restran.net/2015/04/09/gilab-centos-installation-note/ 在 CentOS 6.5 Minimal 系统环境下,用源 ...

  4. Linux绑定双网卡

    Linux绑定双网卡 1. 配置参数文件 版本在centos6以下在/etc/modproe.conf文件中配置,版本是centos6.x或以上在/etc/modproe.d/目录下配置. 2.    ...

  5. 分享一下一款直播App开发的过程

    听说有人声称开发一款直播App不仅耗时还非常昂贵,今天跟大家说道一下,开发一款直播App到底分几步走? 第一步:分解直播App的功能,我们以X客为例 视频直播功能,这是一款直播App最主要的功能,要能 ...

  6. 通过sqlserver日志恢复误删除的数据

     如果你已经急的焦头烂额,看到这篇文章的时候,请你换个坐姿,深呼吸几次,静下心来将这篇文章读完,也许你的问题迎刃而解. 我遇到的情况是这样的,网站被植入木马,盗取了我的web.config文件,web ...

  7. Virtual Box 增加虚拟硬盘容量

    情景: 我现在用 Win10, 因为项目原因要在虚拟机装一个 Win7. 预先估计不足. Win7 C盘容量不够. 方法1: 增加虚拟硬盘文件. 首先把虚拟机 Win7 删掉 (但不要删虚拟硬盘文件, ...

  8. 关闭ehcache的更新检查UpdateChecker

    ehcache默认开启自动更新检查,在你不能联网的环境下,会有异常出现. 在ehcache的配置文件中ehcache标签上加上属性updateCheck="false" 即可.

  9. ls常用参数

    ls常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 玩Linux的老司机们每天都要敲的命令,但是这个鸡蛋的命令还有很多中玩法哟~跟着我一起敲一遍吧!在这里我就列举几个常 ...

  10. JAVA测试装饰者模式

    package shb.java.demo; /** * 测试装饰者模式 * @package :shb.java.demoJava02 * @author shaobn * @Describe : ...