VSFTPD

1、 FTP 服務器

FTP 是 File Transfer Protocol (文件傳輸協議)的英文簡稱,而中文簡稱爲「文傳協議」。
用於 Internet 上的控制文件的雙向傳輸。同時,它也是一個應用程序(Application)。
基於不一樣的操做系統有不一樣的 FTP 應用程序,而全部這些應用程序都遵照同一種協議以傳
輸文件。
在 FTP 的使用當中,用戶常常遇到兩個概念:"下載"(Download)和"上傳"(Upload)。
"下載"文件就是從遠程主機拷貝文件至本身的計算機上;"上傳"文件就是將文件從本身的計
算機中拷貝至遠程主機上。用 Internet 語言來講,用戶可經過客戶機程序向(從)遠程主機
上傳(下載)文件

。

 

2、 VSFTPD 簡介

vsftpd 是「very secure FTP daemon」的縮寫,安全性是它的一個最大的特色。vsftpd
是一個 UNIX 類操做系統上運行的服務器的名字,它能夠運行在諸如 Linux、 BSD、 Solaris、
HP-UNIX 等系統上面,是一個徹底免費的、開放源代碼的 ftp 服務器軟件,支持不少其餘的
FTP 服務器所不支持的特徵。

 

3、 項目中圖片服務器

1 單體架構中的圖片管理
在傳統的單體架構項目中,能夠在 web 項目中添加一個文件夾,來存放上傳的圖片。
例如在工程的根目錄 WebRoot 下建立一個 images 文件夾用於保存已上傳的圖片。
優勢:使用方便,便於管理
缺點:
一、若是是分佈式環境中圖片引用會出現問題。
二、圖片的下載會給服務器增長額外的壓力2 單體架構圖片存儲架構圖

 

3 傳統圖片管理方式在分佈式環境中的問題:

 

4 分佈式環境的圖片管理

 

4、 安裝 VSFTP

1 安裝 vsftpd 組件

yum -y install vsftpd

安裝完後,有/etc/vsftpd/vsftpd.conf 文件,是 vsftp 的配置文件。
2 添加一個 Linux 用戶
此用戶就是用來登陸 ftp 服務器用的。

useradd ftpuser

這樣一個用戶建完,能夠用這個登陸。登陸後默認的路徑爲 /home/ftpuser.
3 給用戶添加密碼。

passwd ftpuser

輸入兩次密碼後修改密碼。
4 防火牆開啓 21 端口
由於 ftp 默認的端口爲 21,而 centos 默認是沒有開啓的,因此要修改 iptables 文件

vim /etc/sysconfig/iptables

在行上面有 22 -j ACCEPT 下面另起一行輸入跟那行差很少的,只是把 22 換成 21,而後:
wq 保存。
還要運行下,重啓 iptables
service iptables restart5 修改 selinux
外網是能夠訪問上去了,但是發現無法返回目錄(使用 ftp 的主動模式,被動模式仍是沒法
訪問),也上傳不了,由於 selinux 做怪了。
修改 selinux:

錯誤 SELinux is disabled

vi /etc/selinux/config

更改成：SELINUX=1

重啓linux

關閉

1 命令查看出selinux的狀態 
sestatus -v 
2 臨時關閉 selinux 
setenforce 0 
3 永久關閉selinux 
vi /etc/sysconfig/selinux 
把裏邊的一行改成 
SELINUX=disabled

setenforce 1 設置SELinux 成爲enforcing模式 
setenforce 0 設置SELinux 成爲permissive模式 
若是要完全禁用SELinux 須要在/etc/sysconfig/selinux中設置參數selinux=0

執行如下命令查看狀態:

[root@bogon ~]# getsebool -a | grep ftp
allow_ftpd_anon_write --> off
allow_ftpd_full_access --> off
allow_ftpd_use_cifs --> off
allow_ftpd_use_nfs --> off
ftp_home_dir --> off
ftpd_connect_db --> off
ftpd_use_passive_mode --> off
httpd_enable_ftp_server --> off
tftp_anon_write --> off
[root@bogon ~]#

執行上面命令,再返回的結果看到兩行都是 off,表明,沒有開啓外網的訪問

[root@bogon ~]# setsebool -P allow_ftpd_full_access on
[root@bogon ~]# setsebool -P ftp_home_dir on

6 關閉匿名訪問
修改/etc/vsftpd/vsftpd.conf 文件:

 

重啓 ftp 服務:
service vsftpd restart7 設置開機啓動 vsftpd ftp 服務
chkconfig vsftpd on

5、 圖片上傳

1 使用 FileZilla 上傳圖片

 

2 使用 FTP 協議訪問圖片服務器
2.1 FTP 協議的 URL 格式

ftp://username:userpassword@IP/路徑/圖片名稱

 

在 VSFTPD 的插件中。不容許這樣訪問。必需要有登陸環節。

 

3 FTPClient 工具
3.1 FTPClient 介紹
FTPClient 是 Apache 提供的一個開源的基於 JAVA 語言的 FTP 客戶端工具。
FTPClient 位於 Apache 的 commons-net 項目中。3.2 FTPClient 的使用
3.2.1 建立項目

 

3.2.2 編寫測試代碼

public class Test {
public static void main(String[] args) throws
Exception {
Test t = new Test();t.FTPClientTest();
}
//FTPClient 的使用
public void FTPClientTest()throws Exception{
//建立 FTPClient 對象
FTPClient ftp = new FTPClient();
//連接 端口使用的 21
ftp.connect("192.168.70.144",21);
//給定用戶名與密碼,連接時完成登陸
ftp.login("ftpuser", "ftpuser");
//操做上傳文件
InputStream is = new
FileInputStream("d:/1.jpg");
//指定上傳文件的保存目錄
ftp.changeWorkingDirectory("/home/ftpuser/sui
bian");
//開啓字節流傳輸ftp.setFileType(FTPClient.BINARY_FILE_TYPE);
//文件上傳
ftp.storeFile("aa.jpg", is);
//退出登陸
ftp.logout();
}
}

Test

上傳不成功也不報錯：

解決方法： 在FTPClient.storeFile()方法前調用FTPClient.enterLocalPassiveMode() 

 

3.3 封裝 FTPClient 的工具類的使用

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

View Code

 

在使用commons-net-3.3.jar這個包的時候，建立文件夾失敗，但又沒有任何報錯，被這個問題困擾了很久，偶然發現了緣由，居然是由於FTP服務器不能建立多層目錄，也就是FTP鏈接後一次只能建立一個文件夾，建立失敗後返回False，但沒有報錯。

 

6、 KindEditor 簡介

KindEditor 是一套開源的 HTML 可視化編輯器,主要用於讓用戶在網站上得到所見即
所得編輯效果,兼容 IE、Firefox、Chrome、Safari、Opera 等主流瀏覽器。
KindEditor 使用 JavaScript 編寫,能夠無縫的於 Java、 .NET、 PHP、 ASP 等程序接合。
KindEditor 很是適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用,
2006 年 7 月首次發佈 2.0 以來,KindEditor 依靠出色的用戶體驗和領先的技術不斷擴大編
輯器市場佔有率,目前在國內已經成爲最受歡迎的編輯器之一。
官網: http://kindeditor.net

7、 基於 KindEditor 實現圖片上傳

1 建立項目
1.1 建立 parent 項目
POM 文件

<project
xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instan
ce"
xsi:schemaLocation="http://maven.apache.org/P
OM/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.v
ersion>
<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-file
upload.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>
<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>

pom.xml

 

1.2 建立 kindEditorDemo
1.2.1 建立項目

 

1.2.2 修改 POM 文件

<project
xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instan
ce"
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>
<parent>
<groupId>com.bjsxt</groupId>
<artifactId>parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<artifactId>kindEditorDemo</artifactId>
<packaging>war</packaging>
<dependencies>
<!-- 單元測試 -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
</dependency>
<!-- 日誌處理 -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
</dependency><dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
</dependency>
<!-- JSP 相關 -->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId></dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<scope>provided</scope>
</dependency>
<!-- 文件上傳組件 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
</dependency>
<dependency>
<groupId>commons-net</groupId>
<artifactId>commons-net</artifactId>
</dependency><!-- Jackson Json 處理工具包 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<!-- 配置 Tomcat 插件 -->
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<configuration>
<path>/</path>
<port>8080</port>
</configuration></plugin>
</plugins>
</build>
</project>

View Code

1.3 框架整合
Web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instan
ce"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/n
s/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-val
ue>
</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.Ch
aracterEncodingFilter</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>

View Code 

spirngmvc.xml

springmvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans
xmlns="http://www.springframework.org/schema/beans
"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-i
nstance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org
/schema/context"
xmlns:mvc="http://www.springframework.org/sch
ema/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-m
vc-4.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spri
ng-context.xsd">
<!-- 包的掃描器主要是掃描@controller -->
<context:component-scan
base-package="com.bjsxt.web.controller"/>
<!-- 註冊兩個新對象 主要是爲了來處理
springmvc 中的其餘 anntation 如:@requestmapping -->
<mvc:annotation-driven/>
<!-- 視圖解析器 -->
<beanclass="org.springframework.web.servlet.view.Intern
alResourceViewResolver">
<property name="prefix"
value="/WEB-INF/jsp/" /><!-- jsp 所在的前綴 -->
<property name="suffix" value=".jsp" />
</bean>
<!-- 文件上傳處理器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.C
ommonsMultipartResolver">
<property name="defaultEncoding"
value="utf-8"></property>
<property name="maxInMemorySize"
value="1024"></property>
<!-- 單位字節 -->
<!--
org.springframework.web.multipart.MaxUploadSizeExc
eededException -->
<property name="maxUploadSize"
value="1000000"></property>
</bean>
<!-- 配置靜態資源映射 --><mvc:resources location="/WEB-INF/css/"
mapping="/css/**"/>
<mvc:resources location="/WEB-INF/js/"
mapping="/js/**"/>
</beans>
applicationContext-service.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans
xmlns="http://www.springframework.org/schema/beans
"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-i
nstance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org
/schema/context"
xmlns:mvc="http://www.springframework.org/sch
ema/mvc"
xsi:schemaLocation="http://www.springframewor
k.org/schema/beans
http://www.springframework.org/schema/beans/spring
-beans.xsdhttp://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-m
vc-4.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spri
ng-context.xsd">
<context:property-placeholder
location="classpath:resource.properties"/>
<!-- 掃描 bean 對象 -->
<context:component-scan
base-package="com.bjsxt.service"/>
</beans>

View Code

resource.properties
預留
2 KindEditor 使用方式
2.1 自定義工具類介紹
FtpUtil:FTPClient 工具類
IDUtils:生成一切 ID 的策略的工具類。可使用他生成圖片名稱
JsonUtils:對象與 json 格式轉換的工具類2.2 在 JSP 中使用 KindEditor
2.2.1 使用步驟
2.2.1.1 在項目中添加 KindEditor 與 Jquery 的 js 文件
2.2.1.2 在 JSP 頁面中經過 script 標籤引入 js
2.2.1.3 在 JSP 中添加 textarea 標籤
2.2.1.4 調用 KindEditor 的 API 將 KindEditor 渲染到 textarea
2.2.2 KindEditor 初始化參數介紹
2.2.2.1 uploadJson: 指定上傳文件的服務器端程序
2.2.2.2 FilePostName: 指定上傳文件 form 名稱。
2.2.2.3 dir:指定上傳文件類型
2.3 實現圖片上傳
PicUploadController

/**
* 圖片上傳 Controller
* @author Administrator
*
*/
@Controller
@RequestMapping("/pic")
public class PicUploadController {@Autowired
private PicUploadService picUploadService;
/**
* 圖片上傳
*/
@RequestMapping("/upload")
@ResponseBody
public String fileUpload(MultipartFile
fileName){
Map<String, Object> map =
this.picUploadService.fileUpload(fileName);
return JsonUtils.objectToJson(map);
}
}
PicUploadService
public interface PicUploadService {
Map<String, Object> fileUpload(MultipartFile
filename);}
PicUploadServiceImpl
/**
* 圖片上傳 Service
* @author Administrator
*
*/
@Service
public class PicUploadServiceImpl implements
PicUploadService {
@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);
String newFileName =
IDUtils.genImageName()+filename.getOriginalFilenam
e().substring(filename.getOriginalFilename().lastI
ndexOf("."));
boolean flag =
FtpUtil.uploadFile(this.FTP_HOST, this.FTP_PORT,
this.FTP_USERNAME, this.FTP_PASSWORD,this.FTP_BASEPATH, path, newFileName,
filename.getInputStream());
if(flag){
map.put("error", 0);
//http://192.168.70.144/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;
}
}

View Code

 

2.4 提交 KindEditor 中的數據
2.4.1 在 KindEditor 中提交方式須要使用 Ajax 方式提交。
2.4.2 須要使用 KindEditor 的一個 sync()的方法將數據同步到
textarea
jsp

<%@ 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) {
obj= K.create('#text_id', {
uploadJson : '/pic/upload',
filePostName:'fileName',
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>
<form id="myForm">
<textarea rows="20" cols="20" id="text_id"
name="desc"></textarea>
<input type="button" value="OK" id="but"/>
</form>
</body>
</html>

View Code

 

Controller

/**
* 內容 Controller
* @author Administrator
*
*/
@Controller
@RequestMapping("/content")
public class ContentController {
/**
* 內容保存
*/
@RequestMapping(value="/save",produces=MediaT
ype.APPLICATION_JSON_VALUE)
@ResponseBody
public String saveContent(String desc){
System.out.println(desc);
Map<String, Object> map = new HashMap<>();
map.put("status",200);
return JsonUtils.objectToJson(map);
}}

View Code