Upload a picture example with a rich text editor

  • 2021-12-11 08:33:58
  • OfStack

Upload pictures with rich text editor

1. js imported from kindeditor


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

2. Associate kindeditor with a text field textarea, that is, initialize an kindeditor object with textarea


itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
// Initialize category selection and picture uploader 
 TAOTAO.init({fun:function(node){
    TAOTAO.changeItemParam(node, "itemAddForm");
 }});

3. Set the parameters to upload


var TT = TAOTAO = {
  //  Editor parameters 
  kingEditorParams : {
    // Specify Upload File Parameter Name 
    filePostName : "uploadFile",
    // Object that specifies the file upload request url . 
    uploadJson : '/pic/upload',
    // Upload type, respectively image , flash , media , file
    dir : "image"
  },
  
  init : function(data){
    //  Initialize the picture upload component 
    this.initPicUpload(data);
    //  Initialize the Select Category component 
    this.initItemCat(data);
  },
  //  Initialize the picture upload component 
  initPicUpload : function(data){
    $(".picFileUpload").each(function(i,e){
      var _ele = $(e);
      _ele.siblings("div.pics").remove();
      _ele.after('\
        <div class="pics">\
          <ul></ul>\
        </div>');
      //  Echo picture 
      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>");
          }
        }
      }
      // Bind the "Upload Picture Button" click Events 
      $(e).click(function(){
        var form = $(this).parentsUntil("form").parent("form");
        // Open the picture upload window 
        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();
            }
          });
        });
      });
    });

Server-side code


 public Map uploadPicture(MultipartFile uploadFile) {
    Map resultMap=new HashMap<>();
    try {
      // Generate 1 New filenames 
      // De-original file name 
      String oldName=uploadFile.getOriginalFilename();
      // Generate a new file name 
      //UUID.randomUUID();
      String newName=IDUtils.genImageName();
      newName=newName+oldName.substring(oldName.lastIndexOf("."));
      String imagePath=new DateTime().toString("/yyyy/MM/dd");
      // Upload pictures 
      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", " File upload failed ");
        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", " File upload exception ");
      return resultMap;
    }
  }

Note: The format of json string returned by the server {error: 01, messageurl}, in which error is an integer rather than a string. If it is written as a string, the picture can be uploaded to the server normally, but it cannot be echoed in the browser.

Thank you for reading, hope to help everyone, thank you for your support to this site!


Related articles: