使用富文本編輯器上傳圖片

1、導入kindeditor的js

<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>

2、將kindeditor與一個文本域textarea進行關聯，即用textarea初始化一個kindeditor對象

itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
//初始化類目選擇和圖片上傳器
 TAOTAO.init({fun:function(node){
        TAOTAO.changeItemParam(node, "itemAddForm");
 }});

3、設置要上傳的參數

var TT = TAOTAO = {
    // 編輯器參數
    kingEditorParams : {
        //指定上傳文件參數名稱
        filePostName  : "uploadFile",
        //指定上傳文件請求的url。
        uploadJson : '/pic/upload',
        //上傳類型，分別爲image、flash、media、file
        dir : "image"
    },
   
    init : function(data){
        // 初始化圖片上傳組件
        this.initPicUpload(data);
        // 初始化選擇類目組件
        this.initItemCat(data);
    },
    // 初始化圖片上傳組件
    initPicUpload : function(data){
        $(".picFileUpload").each(function(i,e){
            var _ele = $(e);
            _ele.siblings("div.pics").remove();
            _ele.after('\
                <div class="pics">\
                    <ul></ul>\
                </div>');
            // 回顯圖片
            if(data && data.pics){
                var imgs = data.pics.split(",");
                for(var i in imgs){
                    if($.trim(imgs[i]).length > 0){
                        _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
                    }
                }
            }
            //給「上傳圖片按鈕」綁定click事件
            $(e).click(function(){
                var form = $(this).parentsUntil("form").parent("form");
                //打開圖片上傳窗口
                KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
                    var editor = this;
                    editor.plugin.multiImageDialog({
                        clickFn : function(urlList) {
                            var imgArray = [];
                            KindEditor.each(urlList, function(i, data) {
                                imgArray.push(data.url);
                                form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
                            });
                            form.find("[name=image]").val(imgArray.join(","));
                            editor.hideDialog();
                        }
                    });
                });
            });
        });

服務端代碼

    public Map uploadPicture(MultipartFile uploadFile) {
        Map resultMap=new HashMap<>();
        try {
            //生成一個新的文件名
            //去原始文件名
            String oldName=uploadFile.getOriginalFilename();
            //生成新的文件名
            //UUID.randomUUID();
            String newName=IDUtils.genImageName();
            newName=newName+oldName.substring(oldName.lastIndexOf("."));
            String imagePath=new DateTime().toString("/yyyy/MM/dd");
            //上傳圖片
            boolean result=FtpUtil.uploadFile(FTP_ADDRESS,FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_PATH,
                    imagePath, newName, uploadFile.getInputStream());
            System.out.println("result="+result);
            if(!result){
                resultMap.put("error", 1);
                resultMap.put("message", "文件上傳失敗");
                System.out.println("hh");
                return resultMap;
            }
            
            resultMap.put("error", 0);
            resultMap.put("url", IMAGE_BASE_PATH + imagePath + "/" + newName);
            return resultMap;
        } catch (IOException e) {
            resultMap.put("error", 1);
            resultMap.put("message", "文件上傳異常");
            return resultMap;
        }
    }

 

注意：服務端返回的json串的格式{error: 0|1,message|url} 其中error爲整型不爲字符串，若是寫成字符串圖片可以正常上傳至服務器，可是不能在瀏覽器中回顯。