码迷,mamicode.com
首页 > Web开发 > 详细

KindEditor图片批量上传

时间:2016-04-15 11:52:37      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

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图片批量上传

标签:

原文地址:http://www.cnblogs.com/lyxy/p/5394775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!