SSMフレームワークの場合-KindEditor + Nginxサーバー+ FTPサービスを使用して、複数のファイルのアップロードを実現します

ステップ1：KindEditorに必要なjsファイルをインポートする

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

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

ステップ2：jspページに写真をアップロードするためのボタンを作成します

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

ステップ3：初期化関数を定義し、ファイルアップロードコントロールを初期化します

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

4番目のステップ：jspページが初期化関数を呼び出します

    OUYANG.init(function(node){
    
    

    })

ステップ5：nginxサーバー、Linuxシステムのファイアウォール、およびFTPサービスをオンにします
ステップ6：resource.propertiesリソースファイルを書き込みます

#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

ステップ7：書き込みツールIDUtils（ランダムに生成されたイメージ名）、FTPUtil（FTPClientはファイルのアップロードを実現し、FTPClient jarファイルをインポートする必要があります）、JsonUtil（jsonデータとオブジェクトの変換、jackson jarファイルをインポートする必要があります）

类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;
    }

}

ステップ8：論理レイヤーサービスを作成し、FTPサービスを呼び出してファイルをアップロードします

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

}

ステップ9：コントローラーを作成し、ページ要求を処理します

@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);
    }
}

ページ効果





KindEditorエディターのマルチファイルアップロードプラグインヘルプドキュメント