• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    使用富文本编辑器上传图片实例详解

    富文本编辑器上传图片

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

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

    上一篇:JSP过滤器Filter配置过滤类型全部汇总
    下一篇:jsp给后台带多个参数的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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