当前位置： 移动技术网 > IT编程>开发语言>Java > 使用富文本编辑器上传图片实例详解

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

2017年12月08日  | 移动技术网IT编程  | 我要评论

华体比分,电动车哪个牌子好,大内密探零零狗快播

富文本编辑器上传图片

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

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网