关闭

SSM框架中-使用KindEditor+Nginx服务器+FTP服务,实现多文件上传

标签: nginxftp图片
116人阅读 评论(0) 收藏 举报
分类:

第一步:导入KindEditor编辑器所需要的js文件

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

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

第二步: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>

第三步:定义初始化函数,初始化文件上传控件

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

第四步:jsp页面调用初始化函数

    OUYANG.init(function(node){

    })

第五步:打开nginx服务器,linux系统的防火墙,FTP服务
第六步:编写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

第七步:编写工具类IDUtils(随机生成图片名),FTPUtil(FTPClient实现文件上传,需要导入FTPClient的jar文件),JsonUtil(json数据和对象转换,需要导入jackson的jar文件)

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


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

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

}

第八步:编写逻辑层service,调用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;
    }

}

第九步:编写控制器,处理页面请求

@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编辑器的多文件上传插件帮助文档

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

KindEditor结合ssm框架使用

介绍最近项目中要用的文件上传的组件与富文本编辑器的使用。一直用的富文本编辑器是金山的KindEditor和百度的Ueditor。之前没有负责处理上传的业务逻辑,只是用的kindEditor的默认upl...
  • ding_spring_autumn
  • ding_spring_autumn
  • 2016-11-12 20:59
  • 791

富文本kindeditor + SSM框架

使用kindeditor 主要是考虑到其可以截图并贴图的功能,毕竟上传图片比较麻烦。 kindeditor 使用也比较简单,下载的文档中有demo可以参考,可以将demo中的初始化kinde...
  • wass_csdn
  • wass_csdn
  • 2017-10-23 21:38
  • 165

SSM中使用Kindeditor插件实现图片的批量上传与回显

效果展现: 一.前端实现批量上传弹出框 二.后端实现图片的保存于回显
  • miss_yingHao
  • miss_yingHao
  • 2017-11-21 14:51
  • 275

KindEditor结合ssm框架使用

介绍最近项目中要用的文件上传的组件与富文本编辑器的使用。一直用的富文本编辑器是金山的KindEditor和百度的Ueditor。之前没有负责处理上传的业务逻辑,只是用的kindEditor的默认upl...
  • ding_spring_autumn
  • ding_spring_autumn
  • 2016-11-12 20:59
  • 791

kindeditor 在SSH框架中的使用。

1.使用环境 struts2.16+spring2.5+hibernate3+JSON 2.action 文件上传action-     FileUploadAction package ...
  • mylovedeye
  • mylovedeye
  • 2013-02-18 11:07
  • 3963

ssm 框架上传图片到服务器

**1.html部分2.JS部分var _csrf = $("meta[name='_csrf']").attr("content"); *//请求令牌(不同项目定义不 同,看架构)* v...
  • yueyishuxueyan
  • yueyishuxueyan
  • 2017-06-21 17:19
  • 491

适用于ssm框架的文件上传下载

springmvc文件上传下载实现起来非常简单,此springmvc上传下载案例适合已经搭建好的ssm框架(spring+springmvc+mybatis)使用,ssm框架项目的搭建我相信你们已经搭...
  • jronzhang
  • jronzhang
  • 2017-03-10 22:35
  • 12482

基于SSM框架的多文件上传Controller类编写

前端代码 ...
  • fitAllEnv
  • fitAllEnv
  • 2017-05-19 15:43
  • 2859

SSM框架-SpringMVC 实例文件上传下载

目录(?)[+]   林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传、多文件上传、...
  • lcx556224523
  • lcx556224523
  • 2017-04-17 09:38
  • 8578

ssm框架练习之文件上传

文件上传在项目中使用的频率也是很高的,思路非常简单,但是实现起来,我因为路径问题,调试了很久,花费了许多不必要的时间,所以,在这里提出来,和大家分享一下 因为我们项目中多处用到了文件上传,所以,我把...
  • qiuqiu_qiuqiu123
  • qiuqiu_qiuqiu123
  • 2017-06-22 14:18
  • 2846
    个人资料
    • 访问:781次
    • 积分:118
    • 等级:
    • 排名:千里之外
    • 原创:11篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档