使用富文本编辑器上传图片实例详解

<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>

itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");//初始化类目选择和图片上传器 TAOTAO.init({fun:function(node){    TAOTAO.changeItemParam(node, "itemAddForm"); }});

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