使用富文本編輯器上傳圖片實例詳解

富文本編輯器上傳圖片

一、導入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>

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

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

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

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！