In the SSM framework-use KindEditor+Nginx server+FTP service to realize multiple file uploads

Step 1: Import the js file needed by KindEditor

<script type="text/javascript" charset="utf-8" 
src="kindeditor-4.1.10/kindeditor-all-min.js"></script>

kindeditor-all-min.js是主文件，必须导入。

Step 2: Create a button for uploading pictures on the jsp page

<a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a>
<input type="hidden" name="image"/>

单做文件上传input元素可以不写,如果做一个表单提交并添加数据到数据库时,页面添加一个form表单，并提供一个隐藏元素用来保存文件上传后的url。

这里使用了easyui 的按钮,所以应该得导入easyui的js文件和css文件。
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/icon.css" />
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"</script>
<script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>

Step 3: Define the initialization function and initialize the file upload control

OUYANG={
        init: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).parents("form");
                //打开图片上传窗口
                    KindEditor.editor(OUYANG.kingEditorParams).loadPlugin('multiimage',function(){
    
    
                    var editor = this;
                    editor.plugin.multiImageDialog({
                        clickFn : function(urlList) {
    
     //返回的url
                            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>");
                            });

                    //将返回的url路径的数组追加至name=image 的input，join方法：数据以,隔开返回一个字符串
                            form.find("[name=image]").val(imgArray.join(","));
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
    },
    //编辑器文件上传初始化参数
    kingEditorParams:{
        //指定上传文件参数名称
        filePostName  : "uploadFile",
        //指定上传文件请求的url。
        uploadJson : '/manager/goods/uploadImageToNginx',
        //上传类型，分别为image、flash、media、file
        dir : "image"
    }
    }

The fourth step: the jsp page calls the initialization function

    OUYANG.init(function(node){
    
    

    })

Step 5: Turn on the nginx server, the firewall of the Linux system, and the FTP service
Step 6: Write the resource.properties resource file

#linux的IP地址
BASE_IP=192.168.43.123
#linux账号
USER_NAME=root
#密码
PASSWORD=123456
#FTP服务端口号
PORT=21
#nginx服务器文件存放路径
NGINX_PATH=/usr/local/nginx/html/images
#访问服务器图片文件的路径
IMAGES_BASEPATH=http://192.168.43.123/images

Step 7: Write tool IDUtils (randomly generated image name), FTPUtil (FTPClient realizes file upload, need to import FTPClient jar file), JsonUtil (json data and object conversion, need to import jackson jar file)

类1：
package com.common.pojo;

import java.util.Random;
/**
 * ftp上传下载工具类
 * <p>Title: FtpUtil</p>
 * <p>Description: </p>
 * <p>Company: www.itcast.com</p> 
 * @author  欧阳理
 * @date    2017年12月01日下午12:21
 * @version 1.0
 */
public class IDUtils {
    
    

    /**
     * 图片名生成
     */
    public static String genImageName() {
        //取当前时间的长整形值包含毫秒
        long millis = System.currentTimeMillis();
        //long millis = System.nanoTime();
        //加上三位随机数
        Random random = new Random();
        int end3 = random.nextInt(999);
        //如果不足三位前面补0
        String str = millis + String.format("%03d", end3);

        return str;
    }
/**
     * 商品id生成
     */
    public static long genItemId() {
        //取当前时间的长整形值包含毫秒
        long millis = System.currentTimeMillis();
        //long millis = System.nanoTime();
        //加上两位随机数
        Random random = new Random();
        int end2 = random.nextInt(99);
        //如果不足两位前面补0
        String str = millis + String.format("%02d", end2);
        long id = new Long(str);
        return id;
    }
}


类2：
package com.common.pojo;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import org.apache.commons.net.ftp.FTP;
import org.apache.commons.net.ftp.FTPClient;
import org.apache.commons.net.ftp.FTPFile;
import org.apache.commons.net.ftp.FTPReply;

/**
 * ftp上传下载工具类
 * <p>Title: FtpUtil</p>
 * <p>Description: </p>
 * <p>Company: www.itcast.com</p> 
 * @author  欧阳理
 * @date    2017年12月01日下午01:11:51
 * @version 1.0
 */
public class FtpUtil {
    
    

    /** 
     * Description: 向FTP服务器上传文件 
     * @param host FTP服务器hostname 
     * @param port FTP服务器端口 
     * @param username FTP登录账号 
     * @param password FTP登录密码 
     * @param basePath FTP服务器基础目录
     * @param filePath FTP服务器文件存放路径。例如分日期存放：/2015/01/01。文件的路径为basePath+filePath
     * @param filename 上传到FTP服务器上的文件名 
     * @param input 输入流 
     * @return 成功返回true，否则返回false 
     */  
    public static boolean uploadFile(String host, int port, String username, String password, String basePath,
            String filePath, String filename, InputStream input) {
        boolean result = false;
        FTPClient ftp = new FTPClient();
        try {
            int reply;
            ftp.connect(host, port);// 连接FTP服务器
            // 如果采用默认端口，可以使用ftp.connect(host)的方式直接连接FTP服务器
            ftp.login(username, password);// 登录
            reply = ftp.getReplyCode();
            if (!FTPReply.isPositiveCompletion(reply)) {
                ftp.disconnect();
                return result;
            }
            //切换到上传目录
            if (!ftp.changeWorkingDirectory(basePath+filePath)) {
                //如果目录不存在创建目录
                String[] dirs = filePath.split("/");
                String tempPath = basePath;
                for (String dir : dirs) {
                    if (null == dir || "".equals(dir)) continue;
                    tempPath += "/" + dir;
                    if (!ftp.changeWorkingDirectory(tempPath)) {
                        if (!ftp.makeDirectory(tempPath)) {
                            return result;
                        } else {
                            ftp.changeWorkingDirectory(tempPath);
                        }
                    }
                }
            }
            //设置上传文件的类型为二进制类型
            ftp.setFileType(FTP.BINARY_FILE_TYPE);
            //上传文件
            if (!ftp.storeFile(filename, input)) {
                return result;
            }
            input.close();
            ftp.logout();
            result = true;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ftp.isConnected()) {
                try {
                    ftp.disconnect();
                } catch (IOException ioe) {
                }
            }
        }
        return result;
    }

    /** 
     * Description: 从FTP服务器下载文件 
     * @param host FTP服务器hostname 
     * @param port FTP服务器端口 
     * @param username FTP登录账号 
     * @param password FTP登录密码 
     * @param remotePath FTP服务器上的相对路径 
     * @param fileName 要下载的文件名 
     * @param localPath 下载后保存到本地的路径 
     * @return 
     */  
    public static boolean downloadFile(String host, int port, String username, String password, String remotePath,String fileName, String localPath) {
        boolean result = false;
        FTPClient ftp = new FTPClient();
        try {
            int reply;
            ftp.connect(host, port);
            // 如果采用默认端口，可以使用ftp.connect(host)的方式直接连接FTP服务器
            ftp.login(username, password);// 登录
            reply = ftp.getReplyCode();
            if (!FTPReply.isPositiveCompletion(reply)) {
                ftp.disconnect();
                return result;
            }
            ftp.changeWorkingDirectory(remotePath);// 转移到FTP服务器目录
            FTPFile[] fs = ftp.listFiles();
            for (FTPFile ff : fs) {
                if (ff.getName().equals(fileName)) {
                    File localFile = new File(localPath + "/" + ff.getName());

                    OutputStream is = new FileOutputStream(localFile);
                    ftp.retrieveFile(ff.getName(), is);
                    is.close();
                }
            }

            ftp.logout();
            result = true;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ftp.isConnected()) {
                try {
                    ftp.disconnect();
                } catch (IOException ioe) {
                }
            }
        }
        return result;
    }
}

类3：
package com.common.pojo;

import java.util.List;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;



public class JsonUtils {
    
    

    // 定义jackson对象
    private static final ObjectMapper MAPPER = new ObjectMapper();

    /**
     * 将对象转换成json字符串。
     * <p>Title: pojoToJson</p>
     * <p>Description: </p>
     * @param data
     * @return
     */
    public static String objectToJson(Object data) {
        try {
            String string = MAPPER.writeValueAsString(data);
            return string;
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 将json结果集转化为对象
     * 
     * @param jsonData json数据
     * @param clazz 对象中的object类型
     * @return
     */
    public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
        try {
            T t = MAPPER.readValue(jsonData, beanType);
            return t;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 将json数据转换成pojo对象list
     * <p>Title: jsonToList</p>
     * <p>Description: </p>
     * @param jsonData
     * @param beanType
     * @return
     */
    public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
        JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
        try {
            List<T> list = MAPPER.readValue(jsonData, javaType);
            return list;
        } catch (Exception e) {
            e.printStackTrace();
        }

        return null;
    }

}

Step 8: Write the logical layer service and call the FTP service for file upload

package com.javaeeshop.manager.service.Impl;

import java.io.File;
import java.util.HashMap;
import java.util.Map;

import org.apache.commons.io.FilenameUtils;
import org.joda.time.DateTime;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import com.common.pojo.FtpUtil;
import com.common.pojo.IDUtils;
import com.javaeeshop.manager.service.UploadFileToNginxService;
@Service
public class UploadFileToNginxServiceImpl implements UploadFileToNginxService {
    
    
    //linux的IP地址
    @Value("${BASE_IP}")
    private  String BASE_IP;
    @Value("${PORT}")
    private Integer PORT;
    //账号
    @Value("${USER_NAME}")
    private  String USER_NAME;
    //密码
    @Value("${PASSWORD}")
    private  String  PASSWORD;
    //nginx服务器静态文件存放路径
    @Value("${NGINX_PATH}")
    private String NGINX_PATH;
    //图片在服务器端的访问url
    @Value("${IMAGES_BASEPATH}")
    private String IMAGES_BASEPATH;
    @Override
    public Map<String, Object> uploadFile(MultipartFile file) {
        Map<String,Object> map=new HashMap<String,Object>();
        try {
            //取得旧文件名的后缀
            String suffix=FilenameUtils.getExtension(file.getOriginalFilename());
            //图片按日期存放，取得当前日期
            String filePath=new DateTime().toString("yyyy/MM/dd");
            //工具类生成随机的文件名
            String filename=IDUtils.genImageName()+"."+suffix;
            boolean result=FtpUtil.uploadFile(BASE_IP, PORT, USER_NAME, PASSWORD, NGINX_PATH,
                              filePath, filename, file.getInputStream());
            //System.out.println(IMAGES_BASEPATH+File.separator+filePath+File.separator+filename);
            if(result){ //上传成功,根据KindEditor文件上传插件要求的参数格式返回错误号和访问图片的路径
                map.put("error", 0);
                map.put("url", IMAGES_BASEPATH+File.separator+filePath+File.separator+filename);
            }else{
                map.put("error", 1);
                map.put("message", "图片上传失败！");
            }
        } catch (Exception e) {
            e.printStackTrace();
            map.put("error", 1);
            map.put("message", "连接超时！");
        }
        return map;
    }

}

Step 9: Write the controller and handle the page request

@Controller
@RequestMapping("/manager/goods")
public class GoodsController {
    
    
    @Autowired
    private UploadFileToNginxService uploadFileToNginxService;
    @RequestMapping("/uploadImageToNginx")
    @ResponseBody
    public String test1(@RequestParam("uploadFile")MultipartFile uploadFile){
        Map<String,Object> map=new HashMap<String,Object>();
        map=uploadFileToNginxService.uploadFile(uploadFile);
        return JsonUtils.objectToJson(map);
    }
}

Page effect





KindEditor editor's multi-file upload plug-in help document