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

效果圖：