zoukankan      html  css  js  c++  java
  • KindEditor图片批量上传

    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();}
                    });
                });
            });

    效果图:

  • 相关阅读:
    Oracle忘记用户名和密码以及管理员用户新增修改删除用户
    Oracle11.2安装和完全卸载及卸载后重装等问题
    软件测试之路2
    软件测试之路1
    Git入门笔记
    CentOS 6.5下二进制安装 MySQL 5.6
    十款压力测试工具
    tomcat 内存设置
    tomcat 安全
    tomcat 模式详解
  • 原文地址:https://www.cnblogs.com/lyxy/p/5394775.html
Copyright © 2011-2022 走看看