使用KindEditor完成图片上传(springmvc&fastdfs/springmvc&ftp)
前端使用KindEditor，后台使用Springmvc
1 拷贝KindEditor相关文件到项目中
拷贝KindEditor相关文件到项目中
2 准备一个jsp页面
页面中我准备了一个超链接，点击就可以打开KindEditor批量图片上传对话框
1.jsp页面中需要引入KindEditor相关的css和js文件。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>KindEditor UploadDemo</title> <!-- 引入kindeditor的css文件 -->
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet"> <!-- 引入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> <script type="text/javascript">
//点击上传图片，打开一个KindEditor上传图片的对话框。
function uploadFileFunction() {
KindEditor.editor({
//指定上传文件参数名称
filePostName : "uploadFile",
//指定上传文件请求的url。
uploadJson : '/pic/upload',
//上传类型，分别为image、flash、media、file
dir : "image"
}).loadPlugin('multiimage', function() {
var editor = this;
editor.plugin.multiImageDialog({ });
});
}
</script>
</head>
<body>
<a href="javascript:uploadFileFunction()">上传图片</a>
</body>
</html>
页面效果如下：
3 后台PictureController
KindEditor的批量上传图片功能，实际上也是一个也给上传，多个图片，每个图片
都会执行下面的方法。需要把commons-io\fileupload的jar包添加到工程中。
maven工程中添加下面的依赖：
下面代码中的图片是上传到了图片服务器里面，当然也可以修改传到其它地方。
package cn.e3mall.controller; import java.util.HashMap;
import java.util.Map; import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile; import cn.e3mall.common.utils.FastDFSClient;
import cn.e3mall.common.utils.JsonUtils; /**
* @title:PictureController
* @description:
* @author jepson
* @date 2018年5月30日 下午4:20:36
* @version 1.0
*/
@Controller
public class PictureController { @Value("${IMAGE_SERVER_URL}")
private String IMAGE_SERVER_URL; @RequestMapping(value = "/pic/upload",produces=MediaType.TEXT_PLAIN_VALUE+";charset=utf-8")
@ResponseBody
@SuppressWarnings("all")
public String uploadFile(MultipartFile uploadFile) { try {
// 1、取文件的扩展名
String originalFilename = uploadFile.getOriginalFilename();
String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1); // 2、创建一个FastDFS的客户端
FastDFSClient client = new FastDFSClient("classpath:conf/client.conf"); // 3、执行上传处理
String path = client.uploadFile(uploadFile.getBytes(), extName); // 4、拼接返回的url和ip地址，拼装成完整的url
String url = IMAGE_SERVER_URL + path; // 5、返回map
Map result = new HashMap<>();
result.put("error", 0);
result.put("url", url); //把java对象转换成json字符串
String json = JsonUtils.objectToJson(result);
return json; } catch (Exception e) {
e.printStackTrace();
// 5、返回map
Map result = new HashMap<>();
result.put("error", 1);
result.put("message", "图片上传失败"); //把java对象转换成json字符串
String json = JsonUtils.objectToJson(result);
return json;
}
}
}
JsonUtils工具类代码
package cn.e3mall.common.utils; import java.util.List; import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper; /**
*
* @title:JsonUtils
* @description:json转换工具类，使用的是jackson
* @author jepson
* @date 2018年5月29日 下午9:16:16
* @version 1.0
*/
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;
} }
FastDFSClient工具类代码
package cn.e3mall.common.utils; import org.csource.common.NameValuePair;
import org.csource.fastdfs.ClientGlobal;
import org.csource.fastdfs.StorageClient1;
import org.csource.fastdfs.StorageServer;
import org.csource.fastdfs.TrackerClient;
import org.csource.fastdfs.TrackerServer; public class FastDFSClient { private TrackerClient trackerClient = null;
private TrackerServer trackerServer = null;
private StorageServer storageServer = null;
private StorageClient1 storageClient = null; public FastDFSClient(String conf) throws Exception {
if (conf.contains("classpath:")) {
conf = conf.replace("classpath:", this.getClass().getResource("/").getPath());
}
ClientGlobal.init(conf);
trackerClient = new TrackerClient();
trackerServer = trackerClient.getConnection();
storageServer = null;
storageClient = new StorageClient1(trackerServer, storageServer);
} /**
* 上传文件方法
* <p>Title: uploadFile</p>
* <p>Description: </p>
* @param fileName 文件全路径
* @param extName 文件扩展名，不包含（.）
* @param metas 文件扩展信息
* @return
* @throws Exception
*/
public String uploadFile(String fileName, String extName, NameValuePair[] metas) throws Exception {
String result = storageClient.upload_file1(fileName, extName, metas);
return result;
} public String uploadFile(String fileName) throws Exception {
return uploadFile(fileName, null, null);
} public String uploadFile(String fileName, String extName) throws Exception {
return uploadFile(fileName, extName, null);
} /**
* 上传文件方法
* <p>Title: uploadFile</p>
* <p>Description: </p>
* @param fileContent 文件的内容，字节数组
* @param extName 文件扩展名
* @param metas 文件扩展信息
* @return
* @throws Exception
*/
public String uploadFile(byte[] fileContent, String extName, NameValuePair[] metas) throws Exception { String result = storageClient.upload_file1(fileContent, extName, metas);
return result;
} public String uploadFile(byte[] fileContent) throws Exception {
return uploadFile(fileContent, null, null);
} public String uploadFile(byte[] fileContent, String extName) throws Exception {
return uploadFile(fileContent, extName, null);
}
}
client.conf配置文件
tracker_server=192.168.25.133:22122
resources.properties配置文件
# 图片服务器地址
IMAGE_SERVER_URL=http://192.168.25.133/
4 springmvc中配置文件上传解析器
<!-- 定义文件上传解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设定默认编码 -->
<property name="defaultEncoding" value="UTF-8"></property>
<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
<property name="maxUploadSize" value="5242880"></property>
</bean>
5 测试
1 点击对话框中的添加图片按钮选择需要上传的图片
2 点击开始上传
能够回显说明图片已经上传成功了，演示中的图片是上传到图片服务器的。
3 如果希望点击“全部插入”之后有另外的逻辑的话，可以在对话框中加入点击事件
下面随便给一个演示：
PictureController中使用ftpClient上传到ftp服务器
package cn.e3mall.controller; import java.util.HashMap;
import java.util.Map; import org.joda.time.DateTime;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile; import cn.e3mall.common.utils.FtpUtils;
import cn.e3mall.common.utils.IDUtils;
import cn.e3mall.common.utils.JsonUtils; /**
* @title:PictureController
* @description:
* @author jepson
* @date 2018年5月30日 下午4:20:36
* @version 1.0
*/
@Controller
public class PictureController { /**
* 使用ftp上传图片
*/
@Value("${FTP_ADDRESS}")
private String FTP_ADDRESS; //服务器地址 @Value("${FTP_PORT}")
private Integer FTP_PORT; //端口 @Value("${FTP_USERNAME}")
private String FTP_USERNAME; //连接ftp服务器用户名 @Value("${FTP_PASSWORD}")
private String FTP_PASSWORD; //密码 @Value("${FTP_BASE_PATH}")
private String FTP_BASE_PATH; //基本路径 @Value("${FTP_IMAGE_BASE_URL}")
private String FTP_IMAGE_BASE_URL; //服务器图片的基本地址 @RequestMapping(value = "/pic/upload",produces=MediaType.TEXT_PLAIN_VALUE+";charset=utf-8")
@ResponseBody
@SuppressWarnings("all")
public String uploadFile(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 = FtpUtils.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD,
FTP_BASE_PATH, imagePath, newName, uploadFile.getInputStream());
//返回结果
if(!result) {
resultMap.put("error", 1);
resultMap.put("message", "文件上传失败");
//为了保证功能的兼容性，需要把Result转换成json格式的字符串。
String json = JsonUtils.objectToJson(resultMap);
return json;
}
resultMap.put("error", 0);
resultMap.put("url", FTP_IMAGE_BASE_URL + imagePath + "/" + newName);
//为了保证功能的兼容性，需要把Result转换成json格式的字符串。
String json = JsonUtils.objectToJson(resultMap);
return json; } catch (Exception e) {
resultMap.put("error", 1);
resultMap.put("message", "文件上传发生异常");
//为了保证功能的兼容性，需要把Result转换成json格式的字符串。
String json = JsonUtils.objectToJson(resultMap);
return json;
}
} /**
* 使用fastdfs服务器
*/
/*
@Value("${IMAGE_SERVER_URL}")
private String IMAGE_SERVER_URL; @RequestMapping(value = "/pic/upload",produces=MediaType.TEXT_PLAIN_VALUE+";charset=utf-8")
@ResponseBody
@SuppressWarnings("all")
public String uploadFile(MultipartFile uploadFile) {
try {
// 1、取文件的扩展名
String originalFilename = uploadFile.getOriginalFilename();
String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1); // 2、创建一个FastDFS的客户端
FastDFSClient client = new FastDFSClient("classpath:conf/client.conf"); // 3、执行上传处理
String path = client.uploadFile(uploadFile.getBytes(), extName); // 4、拼接返回的url和ip地址，拼装成完整的url
String url = IMAGE_SERVER_URL + path; // 5、返回map
Map result = new HashMap<>();
result.put("error", 0);
result.put("url", url); //把java对象转换成json字符串
String json = JsonUtils.objectToJson(result);
return json; } catch (Exception e) {
e.printStackTrace();
// 5、返回map
Map result = new HashMap<>();
result.put("error", 1);
result.put("message", "图片上传失败"); //把java对象转换成json字符串
String json = JsonUtils.objectToJson(result);
return json;
}
}
*/
}
FtpUtils工具类
package cn.e3mall.common.utils; 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文件传输工具栏
* @title:FtpUtil
* @description:
* @author jepson
* @date 2018年6月2日 下午4:59:27
* @version 1.0
*/
public class FtpUtils { /**
* 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);
ftp.setBufferSize(2048); //设置缓存大小2M
//设置传输使用被动模式
ftp.enterLocalPassiveMode();
//上传文件
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;
} public static void main(String[] args) {
try {
FileInputStream in=new FileInputStream(new File("C:/Users/jepson/Pictures/download/ad/ID1/ertong.jpg"));
boolean flag = uploadFile("192.168.25.128", 21, "root", "264778", "/var/ftp/images","/2018/06/02", "yo.jpg", in);
System.out.println(flag);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
}
使用KindEditor完成图片上传(springmvc&fastdfs/springmvc&ftp)的更多相关文章
- kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
- kindeditor更改图片上传时网络图片的路径
当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是server上的/kindeditor/attached/image ...
- kindeditor修改图片上传路径-使用webapi上传图片到图片服务器
kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...
- ajax图片上传及FastDFS入门案例.
今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jqu ...
- ssm项目中KindEditor的图片上传插件，浏览器兼容性问题
解决办法: 原因:使用@ResponseBody注解返回java对象,在浏览器中是Content-Type:application/json;charset=UTF-8 我们需要返回字符串(Strin ...
- leyou_06_图片上传至FastDFS
1.推荐一个开源的FastDFS客户端,支持最新的SpringBoot2.0.配置使用极为简单,支持连接池,支持自动生成缩略图 1.1 在文件上传的微服务中 引入依赖 <dependency&g ...
- 潭州课堂25班：Ph201805201 django 项目 第三十九课 后台 文章发布，图片上传到 FastDFS后端实现 七牛云讲解（课堂笔记）
文章发布: # 1,从前台获取参数# 2,校验参数# 3,把数据保存到数据库# 4,返回执行结果到前台,(创建成功或失败) 自定义 froms.py 校验参数 上传图片到七牛云 注册 https:// ...
- kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
- kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
随机推荐
- Python学习-5.Python的变量与数据类型及字符串的分割与连接
在Python中,变量类型是固定的,一旦声明就不能修改其类型(在Python里感觉不应该用声明,而应该用使用) 正确: var = 1 print(var) var = 2 print(var) 依次 ...
- Lucene索引的【增、删、改、查】
前言 搞检索的,应该多少都会了解Lucene一些,它开源而且简单上手,官方API足够编写些小DEMO.并且根据倒排索引,实现快速检索.本文就简单的实现增量添加索引,删除索引,通过关键字查询,以及更新索 ...
- App与微信WebAPP
我的App与微信搞上了 小麦积分墙摘自网络 最近有很多开发者关心的一个问题是如何提升app的下载量,透过现象开本质,app下载量的终极目标还是为多少客户提供了服务,抛开下载量KPI,app真心关心的问 ...
- pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.
# 背景 安装pip后发现执行pip install pytest,提示下面错误 pip is configured with locations that require TLS/SSL, howe ...
- 使用sn.exe为程序集签名
前言 在写上一篇随笔时,为理解EF事务底层的原理,我去Github上把EF的源码下载放到自己项目调试,不过在编译时遇到了下面这个报错信息.经过一番查阅,了解到了程序集签名(也称强名称签名)的概念.报错 ...
- Vue前端数据采集 埋点 追踪用户系列行为
什么是埋点? 综合 vue埋点 埋点分析,是网站分析的一种常用的数据采集方法.数据埋点分为初级.中级.高级三种方式.数据埋点是一种良好的私有化部署数据采集方式. 埋点技术如何采集数据,有何优缺 ...
- 苹果appID的获取方法
1.登陆 iTunes Connect iTunes Connect 2.选择我的app 3.选择相应的应用 4.查看结果
- SQL语句优化 (二) （53）
接上一部分 (4)如果不是索引列的第一部分,如下例子:可见虽然在money上面建有复合索引,但是由于money不是索引的第一列,那么在查询中这个索引也不会被MySQL采用. mysql> exp ...
- 原生JS实现JQuery的addClass和removeClass
代码如下: document.getElementById("btn").classList.add("active"); document.getElemen ...
- jQuery表单2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...