欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

使用富文本编辑器上传图片实例有哪些

来源:本站整理 作者:佚名 时间:2017-06-25 TAG: 我要投稿

富文本编辑器上传图片
一、导入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为整型不为字符串,如果写成字符串图片能够正常上传至服务器,但是不能在浏览器中回显。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载