前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >基于VSFTPD技术与KindEditor的简单案例

基于VSFTPD技术与KindEditor的简单案例

作者头像
时间静止不是简史
发布于 2020-07-27 10:20:21
1.5K0
发布于 2020-07-27 10:20:21
举报
文章被收录于专栏：Java探索之路

父工程

pom工程，实现项目所需jar包的版本控制

代码语言：javascript
复制
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.bjsxt</groupId>
  <artifactId>parent</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>pom</packaging>
  
  	<!-- 对依赖的jar包的版本统一进行定义 -->
	<properties>
		<junit.version>4.12</junit.version>
		<spring.version>4.1.3.RELEASE</spring.version>
		<mybatis.version>3.2.8</mybatis.version>
		<mybatis.spring.version>1.2.2</mybatis.spring.version>
		<mysql.version>5.1.32</mysql.version>
		<slf4j.version>1.6.4</slf4j.version>
		<druid.version>1.0.9</druid.version>
		<jstl.version>1.2</jstl.version>
		<servlet-api.version>2.5</servlet-api.version>
		<tomcat.version>2.2</tomcat.version>
		<jsp-api.version>2.0</jsp-api.version>
		<zkClient-version>0.10</zkClient-version>
		<dubbo-version>2.5.4</dubbo-version>
		<jackson.version>2.4.2</jackson.version>
		<commons-net.version>3.3</commons-net.version>
		<commons-fileupload.version>1.3.1</commons-fileupload.version>
	</properties>
  	
  	<!-- jar包的依赖注入 ，由于该工程是一个父工程，所以jar包在该pom文件中只是声明 -->
	<dependencyManagement>
		<dependencies>
			<!-- 单元测试 -->
			<dependency>
				<groupId>junit</groupId>
				<artifactId>junit</artifactId>
				<version>${junit.version}</version>
			</dependency>
			<!-- 日志处理 -->
			<dependency>
				<groupId>org.slf4j</groupId>
				<artifactId>slf4j-log4j12</artifactId>
				<version>${slf4j.version}</version>
			</dependency>
			<!-- Mybatis -->
			<dependency>
				<groupId>org.mybatis</groupId>
				<artifactId>mybatis</artifactId>
				<version>${mybatis.version}</version>
			</dependency>
			<dependency>
				<groupId>org.mybatis</groupId>
				<artifactId>mybatis-spring</artifactId>
				<version>${mybatis.spring.version}</version>
			</dependency>
			<!-- MySql -->
			<dependency>
				<groupId>mysql</groupId>
				<artifactId>mysql-connector-java</artifactId>
				<version>${mysql.version}</version>
			</dependency>
			<!-- 连接池 -->
			<dependency>
				<groupId>com.alibaba</groupId>
				<artifactId>druid</artifactId>
				<version>${druid.version}</version>
			</dependency>
			<!-- Spring -->
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-context</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-beans</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-webmvc</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-jdbc</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<dependency>
				<groupId>org.springframework</groupId>
				<artifactId>spring-aspects</artifactId>
				<version>${spring.version}</version>
			</dependency>
			<!-- JSP相关 -->
			<dependency>
				<groupId>jstl</groupId>
				<artifactId>jstl</artifactId>
				<version>${jstl.version}</version>
			</dependency>
			<dependency>
				<groupId>javax.servlet</groupId>
				<artifactId>servlet-api</artifactId>
				<version>${servlet-api.version}</version>
				<scope>provided</scope>
			</dependency>
			<dependency>
				<groupId>javax.servlet</groupId>
				<artifactId>jsp-api</artifactId>
				<version>${jsp-api.version}</version>
				<scope>provided</scope>
			</dependency>
			<!-- 文件上传组件 -->
			<dependency>
				<groupId>commons-fileupload</groupId>
				<artifactId>commons-fileupload</artifactId>
				<version>${commons-fileupload.version}</version>
			</dependency>
			
			<dependency>
				<groupId>commons-net</groupId>
				<artifactId>commons-net</artifactId>
				<version>${commons-net.version}</version>
			</dependency>
			
			<!-- Jackson Json处理工具包 -->
			<dependency>
				<groupId>com.fasterxml.jackson.core</groupId>
				<artifactId>jackson-databind</artifactId>
				<version>${jackson.version}</version>
			</dependency>
		</dependencies>
	</dependencyManagement>
	<!-- build适用于逻辑部署，例如热部署tomcat以及资源拷贝插件 -->
	<build>
		<resources>
			<resource>
				<directory>src/main/java</directory>
				<includes>
					<include>**/*.xml</include>
				</includes>
			</resource>
			<resource>
				<directory>src/main/resources</directory>
				<includes>
					<include>**/*.xml</include>
					<include>**/*.properties</include>
				</includes>
			</resource>
		</resources>
		<!-- tomcat插件，由于子项目不一定每个都是web项目，所以该插件只是声明，并未开启 -->
		<pluginManagement>
			<plugins>
				<!-- 配置Tomcat插件 -->
				<plugin>
					<groupId>org.apache.tomcat.maven</groupId>
					<artifactId>tomcat7-maven-plugin</artifactId>
					<version>${tomcat.version}</version>
				</plugin>
			</plugins>
		</pluginManagement>
	</build>
</project>

子工程

war工程，继承与父工程，实现具体的业务逻辑

子工程结构图

在这里插入图片描述
在这里插入图片描述

commons

三个工具类，实现文件的上传，名字的随机取名，将objec类型数据转换成json类型字符串

FtpUtil .java

代码语言：javascript
复制
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上传下载工具类
 */
public class FtpUtil {

	/** 
	 * Description: 向FTP服务器上传文件 
	 * @param host FTP服务器hostname 
	 * @param port FTP服务器端口 
	 * @param username FTP登录账号 
	 * @param password FTP登录密码 
	 * @param basePath FTP服务器基础目录
	 * @param filePath FTP服务器文件存放路径。例如分日期存放：/2018/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;
	}
}

IDUtils .java

代码语言：javascript
复制
import java.util.Random;
import java.util.UUID;

/**
 * 各种id生成策略
 * @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;
	}
	
}

JsonUtils.java

代码语言：javascript
复制
import java.util.List;

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

/**
 * JSON转换工具类
 */
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层

接口以及实现类 实现图片的上传操作

PicUploadService .java

代码语言：javascript
复制
import java.util.Map;

import org.springframework.web.multipart.MultipartFile;

public interface PicUploadService {
	Map<String,Object>fileUpload(MultipartFile filename);
}

PicUploadServiceImpl.java

代码语言：javascript
复制
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import com.bjsxt.commons.FtpUtil;
import com.bjsxt.commons.IDUtils;
import com.bjsxt.service.PicUploadService;
/**
 * 图片上传Service
 * @author Administrator
 *
 */
@Service
public class PicUploadServiceImpl implements PicUploadService {
			//通过注解的形式将字符串注入到properties文件中
			@Value("${FTP_HOST}")
	        private String FTP_HOST;
			
			@Value("${FTP_PORT}")
	        private int FTP_PORT;
			
			@Value("${FTP_USERNAME}")
	        private String FTP_USERNAME;
			
			@Value("${FTP_PASSWORD}")
	        private String FTP_PASSWORD;
			
			@Value("${FTP_BASEPATH}")
	        private String FTP_BASEPATH;
			
			@Value("${HTTP_BASE_PATH}")
			private String HTTP_BASE_PATH;
	@Override
	public Map<String, Object> fileUpload(MultipartFile filename) {
		Map<String, Object> map = new HashMap<>();
		Date date = new Date();
		try {
		SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
		String path = sdf.format(date);
		System.out.println(path);
		String newFileName = IDUtils.genImageName()+filename.getOriginalFilename().substring(filename.getOriginalFilename().lastIndexOf("."));
		System.out.println(newFileName);
		boolean flag = FtpUtil.uploadFile(this.FTP_HOST, this.FTP_PORT, this.FTP_USERNAME, this.FTP_PASSWORD, this.FTP_BASEPATH, path, newFileName, filename.getInputStream());
		System.out.println(flag);
		if(flag){
				map.put("error", 0);
				//http://192.168.179.128/yyyy/MM/dd/newFileName
				map.put("url", this.HTTP_BASE_PATH+path+newFileName);
			}else{
				map.put("error", 1);
				map.put("message","上传失败");
			}
		} catch (IOException e) {
			map.put("error", 1);
			map.put("message","上传失败");
			e.printStackTrace();
		}
		
		return map;
	}

}

控制层

实现页面交互

PageController

代码语言：javascript
复制
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PageController {
	
	@RequestMapping("/")
	public String showPage() {
		
		return "index";
		
		
	}
}

PicUploadController

代码语言：javascript
复制
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
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 com.bjsxt.commons.JsonUtils;
import com.bjsxt.service.PicUploadService;

@Controller
@RequestMapping("/pic")
public class PicUploadController {
	
	@Autowired
	private PicUploadService picUploadService;
	
	/**
	 * 图片上传
	 * @param filename
	 * @return
	 * ftp://192.168.179.129/2019/07/23/1563849201122248.png
	 */
	@RequestMapping("/upload")
	@ResponseBody
	public String fileUpload(MultipartFile filename) {
		
		Map<String, Object>map=this.picUploadService.fileUpload(filename);
		
		
		return JsonUtils.objectToJson(map);

	}
}

ContextSaveController

代码语言：javascript
复制
import java.util.HashMap;
import java.util.Map;

import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.bjsxt.commons.JsonUtils;
//content/save
@Controller
@RequestMapping("/content")
public class ContextSaveController {

	/**
	 * 保存字符串和文本
	 */
	@RequestMapping(value="/save",produces=MediaType.APPLICATION_JSON_VALUE)
	public String Save(String desc) {
		
		System.out.println(desc);
		Map<String, Object>map=new HashMap<String, Object>();
		map.put("status",200);
		return JsonUtils.objectToJson(map);
		
	}
}

resources文件

存放srping相关配置文件，负责spingmvc的操作

applicationContext-service.xml

代码语言：javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
	<!-- 扫描properties配置文件 -->
	<context:property-placeholder location="classpath:resource.properties"/>
	<!-- 扫描bean对象 -->
	<context:component-scan base-package="com.bjsxt.service"/>
</beans>

resource.properties

请根据自己虚拟机地址和端口以及用于ftp的用户名等进行书写

代码语言：javascript
复制
FTP_HOST=192.168.179.129
FTP_PORT=21
FTP_USERNAME=ftpuser
FTP_PASSWORD=ftpuser
FTP_BASEPATH=/home/ftpuser
HTTP_BASE_PATH=http://192.168.179.129

springmvc.xml

代码语言：javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
      <!-- 包的扫描器主要是扫描@controller -->
      <context:component-scan base-package="com.bjsxt.web.controller"/>  

	   <!-- 注册两个新对象 主要是为了来处理springmvc中的其他anntation 如：@requestmapping -->	
	   <mvc:annotation-driven/>
	   
	   <!-- 视图解析器 -->
	   <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/jsp/" /><!-- jsp所在的前缀 -->
		<property name="suffix" value=".jsp" />
    </bean>
     <!-- 文件上传处理器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    	<property name="defaultEncoding" value="utf-8"></property>
    	<property name="maxInMemorySize" value="1024"></property>
    	<!-- 单位字节 -->
    	<!-- org.springframework.web.multipart.MaxUploadSizeExceededException -->
    	<property name="maxUploadSize" value="1000000"></property>
    </bean>
    <!-- 配置静态资源映射 -->
    <mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
	<mvc:resources location="/WEB-INF/js/" mapping="/js/**"/>
</beans>

KindEditor、jquery

这些资源请自行下载自行下载

前端代码

index.jsp

代码语言：javascript
复制
<%@ 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>Insert title here</title>
<script type="text/javascript" src="/js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" src="/js/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		var obj;
		KindEditor.ready(function(K) {
		   /* textarea的id  */
	       obj= K.create('#text_id', { 
	                uploadJson : '/pic/upload',
	                filePostName:'filename',//因为是基于spring的所以ajax中的参数要和接口中定义的参数一致，特别是大小写，否则会报空指针异常
	                dir:"image"
	        });
	   });
		
		//给按钮添加点击事件
		$("#but").click(function(){
			//将KindEditor中的数据同步到textarea中
			obj.sync();
			
			//通过ajax方式提交表单      serialize()作用：将表单中的数据序列化为key=value&key=value.....
			$.post("/content/save",$("#myForm").serialize(),function(data){
				if(data.status == 200){
					alert("提交成功");
				}else{
					alert("提交失败");
				}
			});
		});
		
	});
</script>
</head>
<body>
<h1>1</h1>
	<form id="myForm">
	<textarea rows="20" cols="20" id="text_id" name="desc"></textarea>
	<input type="button" value="OK" id="but"/>
	</form>
</body>
</html>

web.xml

代码语言：javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">
	<!-- 上下文参数,告诉Spring配置文件路径 -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext-*.xml</param-value>
	</context-param>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- 配置springmvc -->
	<servlet>
		<servlet-name>springmvc</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:springmvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>springmvc</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>

	<filter>
		<filter-name>encoding</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>utf-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encoding</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>


	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
</web-app>

运行效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

文件上传后，会打印图片的地址，只需要把http改成ftp访问即可，如下图

在这里插入图片描述
在这里插入图片描述

注意

要根据需要配置文件的内容来创建相应的包或者目录，或者在配置文件中自行修改

改进: 输入后直接自动同步内容到textarea标签内

1.创建图片上传的service,service实现类,controller(已实现) 2.下载KindEditor,放到静态资源中,并通过script标签指定(注意核实路径,js指定后需要重启项目)

代码语言：javascript
复制
<script src="/static/js/kindeditor/kindeditor.js"></script>
<script src="/static/js/kindeditor/lang/zh-CN.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

3.设置自动提交的代码

代码语言：javascript
复制
	$(function(){	
		var obj;
		KindEditor.ready(function(K) {
	       obj= K.create('#analyse', { /* textarea的id值  */
	                uploadJson : '/pic/upload',
	                filePostName:'filename',//因为是基于spring的所以ajax中的参数要和接口中定义的参数一致，特别是大小写，否则会报空指针异常
	                dir:"image",
	                syncType:"form",
	                afterCreate : function() { this.sync(); }, //自动提交, 关键是这两个
					afterBlur: function(){this.sync();}///自动提交,关键是这两个
	        });
	   });

    });
  1. 项目案例源码： 链接：https://pan.baidu.com/s/1DS2rEw0Z3OHT3GSqYaGSVA 提取码：kl8b
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/07/23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
java
xml
ftp
网络安全
mvc

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

java
xml
ftp
网络安全
mvc
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 父工程
  • 子工程
    • 子工程结构图
      • commons
        • FtpUtil .java
        • IDUtils .java
        • JsonUtils.java
      • service层
        • PicUploadService .java
        • PicUploadServiceImpl.java
      • 控制层
        • PageController
        • PicUploadController
        • ContextSaveController
      • resources文件
        • applicationContext-service.xml
        • resource.properties
        • springmvc.xml
        • KindEditor、jquery
      • 前端代码
        • index.jsp
        • web.xml
      • 运行效果
        • 注意
        • 改进: 输入后直接自动同步内容到textarea标签内
        领券

        腾讯云开发者

        扫码关注腾讯云开发者

        扫码关注腾讯云开发者

        领取腾讯云代金券

        热门产品

        热门推荐

        更多推荐

        Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

        深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

        腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

        Copyright © 2013 - 2024 Tencent Cloud.

        All Rights Reserved. 腾讯云 版权所有

        登录 后参与评论