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


            富文本编辑器上传图片

一、导入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为整型不为字符串，如果写成字符串图片能够正常上传至服务器，但是不能在浏览器中回显。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！