Nginx 搭建图片服务器

本章内容通过Nginx 和 FTP 搭建图片服务器。在学习本章内容前，请确保您的Linux 系统已经安装了Nginx和Vsftpd。

Nginx 安装：http://www.cnblogs.com/itdragon/p/7850985.html

Vsftpd 安装：http://www.cnblogs.com/itdragon/p/7857649.html

本章知识点

效果图：

需求：实现图片的上传和批量上传

技术：Nginx，Vsftpd，Spring，SpringMVC，KindEditor，CentOS

说明：本章节内容主要是实现图片的上传功能。使用 KindEditer 是为了更好的演示图片的上传，回显，批量效果。后台代码与KindEditer没有直接关系，放心阅读。另外源码中有Mybatis的jar，不用理会，本章内容用不到，是为后续内容做准备！

源码：见文章底部

场景：用户将图片上传到 tomcat 服务器上，再由 tomcat 服务器通过FTP上传到 Nginx 服务器上。



项目结构：

单元测试

首先要攻破核心技术。通过单元测试实现图片上传的功能。

  1. package com.itdragon.test;
  3. import java.io.File;
  4. import java.io.FileInputStream;
  6. import org.apache.commons.net.ftp.FTP;
  7. import org.apache.commons.net.ftp.FTPClient;
  8. import org.junit.Test;
  10. public class PictureFTPTest {
  12. 	// 测试 ftp 上传图片功能
  13. 	@Test
  14. 	public void testFtpClient() throws Exception {
  15. 		// 1. 创建一个FtpClient对象
  16. 		FTPClient ftpClient = new FTPClient();
  17. 		// 2. 创建 ftp 连接
  18. 		ftpClient.connect("192.168.0.11", 21);
  19. 		// 3. 登录 ftp 服务器
  20. 		ftpClient.login("ftpuser", "root");
  21. 		// 4. 读取本地文件
  22. 		FileInputStream inputStream = new FileInputStream(new File("F:\\hello.png"));
  23. 		// 5. 设置上传的路径
  24. 		ftpClient.changeWorkingDirectory("/usr/local/nginx/html/images");
  25. 		// 6. 修改上传文件的格式为二进制
  26. 		ftpClient.setFileType(FTP.BINARY_FILE_TYPE);
  27. 		// 7. 服务器存储文件，第一个参数是存储在服务器的文件名，第二个参数是文件流
  28. 		ftpClient.storeFile("hello.jpg", inputStream);
  29. 		// 8. 关闭连接
  30. 		ftpClient.logout();
  32. 	}
  34. }

说明：这里的ip地址，端口，ftp用户名，密码，本地文件路径，以及Nginx服务器图片路径等，这些字符串参数都要根据自己实际设置的来填写的。如果你的Nginx和Vsftpd安装是按照我提供的链接来做的。那你只需要改ip地址即可。

Maven 的Web 项目

搭建Maven的Web 项目，之前有写过。这里就不过多描述。

项目核心配置文件

首先是 Maven 的核心文件 pom.xml

  1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  2. 	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  3. 	<modelVersion>4.0.0</modelVersion>
  4. 	<groupId>com.itdragon.upload</groupId>
  5. 	<artifactId>pictrue-service</artifactId>
  6. 	<version>0.0.1-SNAPSHOT</version>
  7. 	<packaging>war</packaging>
  9. 	<!-- 集中定义依赖版本号 -->
  10. 	<properties>
  11. 		<junit.version>4.12</junit.version>
  12. 		<spring.version>4.1.3.RELEASE</spring.version>
  13. 		<mybatis.version>3.2.8</mybatis.version>
  14. 		<mybatis.spring.version>1.2.2</mybatis.spring.version>
  15. 		<mybatis.paginator.version>1.2.15</mybatis.paginator.version>
  16. 		<mysql.version>5.1.6</mysql.version>
  17. 		<slf4j.version>1.6.4</slf4j.version>
  18. 		<jackson.version>2.4.2</jackson.version>
  19. 		<druid.version>1.0.9</druid.version>
  20. 		<httpclient.version>4.3.5</httpclient.version>
  21. 		<jstl.version>1.2</jstl.version>
  22. 		<servlet-api.version>2.5</servlet-api.version>
  23. 		<jsp-api.version>2.0</jsp-api.version>
  24. 		<joda-time.version>2.5</joda-time.version>
  25. 		<commons-lang3.version>3.3.2</commons-lang3.version>
  26. 		<commons-io.version>1.3.2</commons-io.version>
  27. 		<commons-net.version>3.3</commons-net.version>
  28. 		<pagehelper.version>3.4.2</pagehelper.version>
  29. 		<jsqlparser.version>0.9.1</jsqlparser.version>
  30. 		<commons-fileupload.version>1.3.1</commons-fileupload.version>
  31. 		<jedis.version>2.7.2</jedis.version>
  32. 		<solrj.version>4.10.3</solrj.version>
  33. 	</properties>
  34. 	<dependencies>
  35. 		<!-- 时间操作组件 -->
  36. 		<dependency>
  37. 			<groupId>joda-time</groupId>
  38. 			<artifactId>joda-time</artifactId>
  39. 			<version>${joda-time.version}</version>
  40. 		</dependency>
  41. 		<!-- Apache工具组件 -->
  42. 		<dependency>
  43. 			<groupId>org.apache.commons</groupId>
  44. 			<artifactId>commons-lang3</artifactId>
  45. 			<version>${commons-lang3.version}</version>
  46. 		</dependency>
  47. 		<dependency>
  48. 			<groupId>org.apache.commons</groupId>
  49. 			<artifactId>commons-io</artifactId>
  50. 			<version>${commons-io.version}</version>
  51. 		</dependency>
  52. 		<dependency>
  53. 			<groupId>commons-net</groupId>
  54. 			<artifactId>commons-net</artifactId>
  55. 			<version>${commons-net.version}</version>
  56. 		</dependency>
  57. 		<!-- Jackson Json处理工具包 -->
  58. 		<dependency>
  59. 			<groupId>com.fasterxml.jackson.core</groupId>
  60. 			<artifactId>jackson-databind</artifactId>
  61. 			<version>${jackson.version}</version>
  62. 		</dependency>
  63. 		<!-- httpclient -->
  64. 		<dependency>
  65. 			<groupId>org.apache.httpcomponents</groupId>
  66. 			<artifactId>httpclient</artifactId>
  67. 			<version>${httpclient.version}</version>
  68. 		</dependency>
  69. 		<!-- 单元测试 -->
  70. 		<dependency>
  71. 			<groupId>junit</groupId>
  72. 			<artifactId>junit</artifactId>
  73. 			<version>${junit.version}</version>
  74. 			<scope>test</scope>
  75. 		</dependency>
  76. 		<!-- 日志处理 -->
  77. 		<dependency>
  78. 			<groupId>org.slf4j</groupId>
  79. 			<artifactId>slf4j-log4j12</artifactId>
  80. 			<version>${slf4j.version}</version>
  81. 		</dependency>
  82. 		<!-- Mybatis -->
  83. 		<dependency>
  84. 			<groupId>org.mybatis</groupId>
  85. 			<artifactId>mybatis</artifactId>
  86. 			<version>${mybatis.version}</version>
  87. 		</dependency>
  88. 		<dependency>
  89. 			<groupId>org.mybatis</groupId>
  90. 			<artifactId>mybatis-spring</artifactId>
  91. 			<version>${mybatis.spring.version}</version>
  92. 		</dependency>
  93. 		<dependency>
  94. 			<groupId>com.github.miemiedev</groupId>
  95. 			<artifactId>mybatis-paginator</artifactId>
  96. 			<version>${mybatis.paginator.version}</version>
  97. 		</dependency>
  98. 		<dependency>
  99. 			<groupId>com.github.pagehelper</groupId>
  100. 			<artifactId>pagehelper</artifactId>
  101. 			<version>${pagehelper.version}</version>
  102. 		</dependency>
  103. 		<!-- MySql -->
  104. 		<dependency>
  105. 			<groupId>mysql</groupId>
  106. 			<artifactId>mysql-connector-java</artifactId>
  107. 			<version>${mysql.version}</version>
  108. 		</dependency>
  109. 		<!-- 连接池 -->
  110. 		<dependency>
  111. 			<groupId>com.alibaba</groupId>
  112. 			<artifactId>druid</artifactId>
  113. 			<version>${druid.version}</version>
  114. 		</dependency>
  115. 		<!-- Spring -->
  116. 		<dependency>
  117. 			<groupId>org.springframework</groupId>
  118. 			<artifactId>spring-context</artifactId>
  119. 			<version>${spring.version}</version>
  120. 		</dependency>
  121. 		<dependency>
  122. 			<groupId>org.springframework</groupId>
  123. 			<artifactId>spring-beans</artifactId>
  124. 			<version>${spring.version}</version>
  125. 		</dependency>
  126. 		<dependency>
  127. 			<groupId>org.springframework</groupId>
  128. 			<artifactId>spring-webmvc</artifactId>
  129. 			<version>${spring.version}</version>
  130. 		</dependency>
  131. 		<dependency>
  132. 			<groupId>org.springframework</groupId>
  133. 			<artifactId>spring-jdbc</artifactId>
  134. 			<version>${spring.version}</version>
  135. 		</dependency>
  136. 		<dependency>
  137. 			<groupId>org.springframework</groupId>
  138. 			<artifactId>spring-aspects</artifactId>
  139. 			<version>${spring.version}</version>
  140. 		</dependency>
  141. 		<!-- JSP相关 -->
  142. 		<dependency>
  143. 			<groupId>jstl</groupId>
  144. 			<artifactId>jstl</artifactId>
  145. 			<version>${jstl.version}</version>
  146. 		</dependency>
  147. 		<dependency>
  148. 			<groupId>javax.servlet</groupId>
  149. 			<artifactId>servlet-api</artifactId>
  150. 			<version>${servlet-api.version}</version>
  151. 			<scope>provided</scope>
  152. 		</dependency>
  153. 		<dependency>
  154. 			<groupId>javax.servlet</groupId>
  155. 			<artifactId>jsp-api</artifactId>
  156. 			<version>${jsp-api.version}</version>
  157. 			<scope>provided</scope>
  158. 		</dependency>
  159. 		<!-- 文件上传组件 -->
  160. 		<dependency>
  161. 			<groupId>commons-fileupload</groupId>
  162. 			<artifactId>commons-fileupload</artifactId>
  163. 			<version>${commons-fileupload.version}</version>
  164. 		</dependency>
  165. 		<!-- Redis客户端 -->
  166. 		<dependency>
  167. 			<groupId>redis.clients</groupId>
  168. 			<artifactId>jedis</artifactId>
  169. 			<version>${jedis.version}</version>
  170. 		</dependency>
  171. 		<!-- solr客户端 -->
  172. 		<dependency>
  173. 			<groupId>org.apache.solr</groupId>
  174. 			<artifactId>solr-solrj</artifactId>
  175. 			<version>${solrj.version}</version>
  176. 		</dependency>
  177. 	</dependencies>
  179. 	<build>
  180. 		<finalName>${project.artifactId}</finalName>
  181. 		<plugins>
  182. 			<!-- 资源文件拷贝插件 -->
  183. 			<plugin>
  184. 				<groupId>org.apache.maven.plugins</groupId>
  185. 				<artifactId>maven-resources-plugin</artifactId>
  186. 				<version>2.7</version>
  187. 				<configuration>
  188. 					<encoding>UTF-8</encoding>
  189. 				</configuration>
  190. 			</plugin>
  191. 			<!-- java编译插件 -->
  192. 			<plugin>
  193. 				<groupId>org.apache.maven.plugins</groupId>
  194. 				<artifactId>maven-compiler-plugin</artifactId>
  195. 				<version>3.2</version>
  196. 				<configuration>
  197. 					<source>1.7</source>
  198. 					<target>1.7</target>
  199. 					<encoding>UTF-8</encoding>
  200. 				</configuration>
  201. 			</plugin>
  202. 		</plugins>
  203. 		<pluginManagement>
  204. 			<plugins>
  205. 				<!-- 配置Tomcat插件 -->
  206. 				<plugin>
  207. 					<groupId>org.apache.tomcat.maven</groupId>
  208. 					<artifactId>tomcat7-maven-plugin</artifactId>
  209. 					<version>2.2</version>
  210. 				</plugin>
  211. 			</plugins>
  212. 		</pluginManagement>
  213. 	</build>
  214. </project>

说明：和文件上传有直接关系的是：

  1. <dependency>
  2. 			<groupId>commons-fileupload</groupId>
  3. 			<artifactId>commons-fileupload</artifactId>
  4. 		</dependency>

然后是 Web 项目的核心文件 web.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. 	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  4. 	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  5. 	id="taotao" version="2.5">
  6. 	<display-name>pictrue-service</display-name>
  7. 	<!-- 加载spring容器 -->
  8. 	<context-param>
  9. 		<param-name>contextConfigLocation</param-name>
  10. 		<param-value>classpath:spring/applicationContext-*.xml</param-value>
  11. 	</context-param>
  12. 	<listener>
  13. 		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  14. 	</listener>
  15. 	<!-- 解决post乱码 -->
  16. 	<filter>
  17. 		<filter-name>CharacterEncodingFilter</filter-name>
  18. 		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  19. 		<init-param>
  20. 			<param-name>encoding</param-name>
  21. 			<param-value>utf-8</param-value>
  22. 		</init-param>
  23. 	</filter>
  24. 	<filter-mapping>
  25. 		<filter-name>CharacterEncodingFilter</filter-name>
  26. 		<url-pattern>/*</url-pattern>
  27. 	</filter-mapping>
  28. 	<!-- springmvc的前端控制器 -->
  29. 	<servlet>
  30. 		<servlet-name>pictrue-service</servlet-name>
  31. 		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  32. 		<init-param>
  33. 			<param-name>contextConfigLocation</param-name>
  34. 			<param-value>classpath:spring/springmvc.xml</param-value>
  35. 		</init-param>
  36. 		<load-on-startup>1</load-on-startup>
  37. 	</servlet>
  38. 	<servlet-mapping>
  39. 		<servlet-name>pictrue-service</servlet-name>
  40. 		<url-pattern>/</url-pattern>
  41. 	</servlet-mapping>
  42. </web-app>

再是 SpringMVC 配置文件 springmvc.xml，需要添加文件上传解析器

  1. <!-- 定义文件上传解析器 -->
  2. 	<bean id="multipartResolver"
  3. 		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  4. 		<!-- 设定默认编码 -->
  5. 		<property name="defaultEncoding" value="UTF-8"></property>
  6. 		<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
  7. 		<property name="maxUploadSize" value="5242880"></property>
  8. 	</bean>

最后是 Ftp 配置文件 resource.properties

  1. FTP_ADDRESS=192.168.0.11
  2. FTP_PORT=21
  3. FTP_USERNAME=ftpuser
  4. FTP_PASSWORD=root
  5. FTP_BASE_PATH=/usr/local/nginx/html/images
  6. IMAGE_BASE_URL=http://192.168.0.11/images

Service 层

上传图片的接口 PictureService.java

  1. package com.itdragon.service;
  2. import java.util.Map;
  3. import org.springframework.web.multipart.MultipartFile;
  4. public interface PictureService {
  6. 	/**
  7. 	 * 上传，批量上传接口
  8. 	 * @param uploadFile
  9. 	 * @return
  10. 	 */
  11. 	Map uploadPicture(MultipartFile uploadFile);
  12. }

上传图片接口实现类 PictureServiceImpl.java

  1. package com.itdragon.service.impl;
  3. import java.io.IOException;
  4. import java.io.InputStream;
  5. import java.util.HashMap;
  6. import java.util.Map;
  8. import org.apache.commons.net.ftp.FTP;
  9. import org.apache.commons.net.ftp.FTPClient;
  10. import org.apache.commons.net.ftp.FTPReply;
  11. import org.springframework.beans.factory.annotation.Value;
  12. import org.springframework.stereotype.Service;
  13. import org.springframework.web.multipart.MultipartFile;
  15. import com.itdragon.service.PictureService;
  17. @Service
  18. @SuppressWarnings({"rawtypes", "unchecked"})
  19. public class PictureServiceImpl implements PictureService {
  21. 	// 通过 Spring4 的 Value注解，获取配置文件中的属性值
  22. 	@Value("${FTP_ADDRESS}")
  23. 	private String FTP_ADDRESS; 	// ftp 服务器ip地址
  24. 	@Value("${FTP_PORT}")
  25. 	private Integer FTP_PORT;		// ftp 服务器port，默认是21
  26. 	@Value("${FTP_USERNAME}")
  27. 	private String FTP_USERNAME;	// ftp 服务器用户名
  28. 	@Value("${FTP_PASSWORD}")
  29. 	private String FTP_PASSWORD;	// ftp 服务器密码
  30. 	@Value("${FTP_BASE_PATH}")
  31. 	private String FTP_BASE_PATH;	// ftp 服务器存储图片的绝对路径
  32. 	@Value("${IMAGE_BASE_URL}")
  33. 	private String IMAGE_BASE_URL;	// ftp 服务器外网访问图片路径
  35. 	@Override
  36. 	public Map uploadPicture(MultipartFile uploadFile) {
  37. 		Map resultMap = new HashMap<>();
  38. 		try {
  39. 			// 1. 取原始文件名
  40. 			String oldName = uploadFile.getOriginalFilename();
  42. 			// 2. ftp 服务器的文件名
  43. 			String newName = oldName;
  44. 			//图片上传
  45. 			boolean result = uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD,
  46. 					uploadFile.getInputStream(), FTP_BASE_PATH, newName);
  47. 			//返回结果
  48. 			if(!result) {
  49. 				resultMap.put("error", 1);
  50. 				resultMap.put("message", "upload Fail");
  51. 				return resultMap;
  52. 			}
  53. 			resultMap.put("error", 0);
  54. 			resultMap.put("url", IMAGE_BASE_URL + "/" + newName);
  55. 			return resultMap;
  57. 		} catch (Exception e) {
  58. 			e.printStackTrace();
  59. 			resultMap.put("error", 1);
  60. 			resultMap.put("message", "upload Fail");
  61. 			return resultMap;
  62. 		}
  63. 	}
  65. 	/**
  66. 	 * ftp 上传图片方法
  67. 	 * @param ip 			ftp 服务器ip地址
  68. 	 * @param port 			ftp 服务器port，默认是21
  69. 	 * @param account 		ftp 服务器用户名
  70. 	 * @param passwd 		ftp 服务器密码
  71. 	 * @param inputStream	文件流
  72. 	 * @param workingDir 	ftp 服务器存储图片的绝对路径
  73. 	 * @param fileName  	上传到ftp 服务器文件名
  74. 	 * @throws Exception
  75. 	 *
  76. 	 */
  77. 	public boolean uploadFile(String ip, Integer port, String account, String passwd,
  78. 			InputStream inputStream, String workingDir, String fileName) throws Exception{
  79. 		boolean result = false;
  80. 		// 1. 创建一个FtpClient对象
  81. 		FTPClient ftpClient = new FTPClient();
  82. 		try {
  83. 			// 2. 创建 ftp 连接
  84. 			ftpClient.connect(ip, port);
  85. 			// 3. 登录 ftp 服务器
  86. 			ftpClient.login(account, passwd);
  87. 			int reply = ftpClient.getReplyCode(); // 获取连接ftp 状态返回值
  88. 			System.out.println("code : " + reply);
  89. 			if (!FTPReply.isPositiveCompletion(reply)) {
  90. 				ftpClient.disconnect(); // 如果返回状态不再 200 ~ 300 则认为连接失败
  91. 				return result;
  92. 			}
  93. 			// 4. 读取本地文件
  94. //			FileInputStream inputStream = new FileInputStream(new File("F:\\hello.png"));
  95. 			// 5. 设置上传的路径
  96. 			ftpClient.changeWorkingDirectory(workingDir);
  97. 			// 6. 修改上传文件的格式为二进制
  98. 			ftpClient.setFileType(FTP.BINARY_FILE_TYPE);
  99. 			// 7. 服务器存储文件，第一个参数是存储在服务器的文件名，第二个参数是文件流
  100. 			if (!ftpClient.storeFile(fileName, inputStream)) {
  101. 				return result;
  102. 			}
  103. 			// 8. 关闭连接
  104. 			inputStream.close();
  105. 			ftpClient.logout();
  106. 			result = true;
  107. 		} catch (Exception e) {
  108. 			e.printStackTrace();
  109. 		}finally {
  110. 			// FIXME 听说，项目里面最好少用try catch 捕获异常，这样会导致Spring的事务回滚出问题？？？难道之前写的代码都是假代码！！！
  111. 			if (ftpClient.isConnected()) {
  112. 				try {
  113. 					ftpClient.disconnect();
  114. 				} catch (IOException ioe) {
  115. 				}
  116. 			}
  117. 		}
  118. 		return result;
  119. 	}
  121. }

说明：

① @Value 注解是Spring4 中提供的，@Value("${XXX}")

② 返回值是一个Map，并且key有error，url，message。这是根据KindEditer的语法要求来的。详情见链接。http://kindeditor.net/docs/upload.html

Controller 层

负责页面跳转的 PageController.java

  1. package com.itdragon.controller;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.PathVariable;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  7. @Controller
  8. public class PageController {
  10. 	/**
  11. 	 * 打开首页
  12. 	 */
  13. 	@RequestMapping("/")
  14. 	public String showIndex() {
  15. 		return "index";
  16. 	}
  18. 	@RequestMapping("/{page}")
  19. 	public String showpage(@PathVariable String page) {
  20. 		System.out.println("page : " + page);
  21. 		return page;
  22. 	}
  23. }

负责图片上传的 PictureController.java

  1. package com.itdragon.controller;
  3. import java.util.Map;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.RequestParam;
  8. import org.springframework.web.bind.annotation.RestController;
  9. import org.springframework.web.multipart.MultipartFile;
  11. import com.fasterxml.jackson.core.JsonProcessingException;
  12. import com.fasterxml.jackson.databind.ObjectMapper;
  13. import com.itdragon.service.PictureService;
  15. @RestController
  16. public class PictureController {
  18. 	@Autowired
  19. 	private PictureService pictureService;
  21. 	@RequestMapping("pic/upload")
  22. 	public String pictureUpload(@RequestParam(value = "fileUpload") MultipartFile uploadFile) {
  23. 		String json = "";
  24. 		try {
  25. 			Map result = pictureService.uploadPicture(uploadFile);
  26. 			// 浏览器擅长处理json格式的字符串，为了减少因为浏览器内核不同导致的bug，建议用json
  27. 			json = new ObjectMapper().writeValueAsString(result);
  28. 		} catch (JsonProcessingException e) {
  29. 			e.printStackTrace();
  30. 		}
  31. 		return json;
  32. 	}
  33. }

说明：

① @RestController 也是Spring4 提供的，是 @Controller + @ResponseBody 的组合注解。

② Controller层的返回值是一个json格式的字符串。是考虑到浏览器对json解析兼容性比较好。

Views视图层

负责上传图片的jsp页面 pic-upload.jsp

  1. <%@ page language="java" contentType="text/html; UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>ITDragon 图片上传</title>
  7. </head>
  8. 	<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
  9. 	<script type="text/javascript" src="js/jquery.min.js"></script>
  10. 	<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
  11. 	<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
  12. </head>
  13. <body>
  14. 	<h3>测试上传图片功能接口的form表单</h3>
  15.     <form action="pic/upload" method="post" enctype="multipart/form-data">
  16. 	    <input type="file" name="fileUpload" />
  17. 	    <input type="submit" value="上传文件" />
  18.     </form>
  19.     <hr />
  20.     <h3>借用KindEditor富文本编辑器实现批量上传图片</h3>
  21.     <textarea id="kindEditorDesc" style="width:800px;height:300px;visibility:hidden;"></textarea>
  22.     <script type="text/javascript">
  23. 		$(function(){
  24. 			//初始化富文本编辑器
  25. 			KindEditor.create("#kindEditorDesc", {
  26. 				// name值，必须和Controller 的参数对应，不然会提示 400 的错误
  27. 				filePostName : "fileUpload",
  28. 				// action值，
  29. 				uploadJson : '/pic/upload',
  30. 				// 设置上传类型，分别为image、flash、media、file
  31. 				dir : "image"
  32. 			});
  33. 		});
  34. 	</script>
  35. </body>
  36. </html>

说明：pic-upload.jsp 分为两个部分，第一个部分是为了测试上传图片功能的form表单。第二个部分是为了更好的体验上传，批量上传，回显功能的KindEditer 富文本编辑器。

总结

  • Nginx 搭建服务器的思维
  • Java实现 Ftp上传图片的功能
  • KindEditer 上传图片的功能

源码：https://github.com/ITDragonBlog/daydayup/tree/master/Nginx

Nginx 搭建图片服务器到这里就结束了，有什么不足的地方，请赐教。如果觉得不错，可以点个赞哦！

Nginx 搭建图片服务器的更多相关文章

  1. Nginx搭建图片服务器

    Nginx搭建图片服务器 标签(空格分隔): linux,nginx Nginx常用命令 ./nginx 启动 ./nginx -s reload 重载配置文件 ./nginx -s stop|sta ...

  2. nginx 搭建图片服务器（windows 下，linux 下原理应该一样）

    作者的心声:很多知道的.用过的东西,不写下来,下次还要百度查询,浪费时间和精力,故本次写下学习笔记,方便下次查阅. 题外话:如有读者通过我这篇博客解决了工作上的难题,可以给个评论,让我一起分享你的喜悦 ...

  3. Nginx，Nginx 搭建图片服务器

    Nginx Nginx 概述 反向代理 工作流程 优点 1:保护了真实的web服务器,保证了web服务器的资源安全 2:节约了有限的IP地址资源 3:减少WEB服务器压力,提高响应速度 4:其他优点 ...

  4. ftp&nginx搭建图片服务器

    下面使用ftp+nginx搭建一个简单的服务器 ftp用于文件的传输 nginx提供http服务 nginx服务器的安装和配置可以参照之前的教程:nginx安装及其配置详细教程 下面介绍ftp服务的安 ...

  5. 使用Nginx搭建图片服务器（windows）

    知识点:在windows系统中,搭建图片上传服务器 参考博客:http://blog.csdn.net/u010942834/article/details/72953441 1.进入官网下载ngin ...

  6. 二、nginx搭建图片服务器

    接上篇:Nginx安装手册 cd /usr/local/nginx/conf/ 配置图片服务器 方法一.在配置文件server{}中location /{} 修改配置: #默认请求 location ...

  7. ubuntu16.06+vsftpd+nginx搭建图片服务器

    安装vsftpd 注:以下指令都在root账户下操作 # apt安装vsftpd apt-get install vsftpd #启动vsftpd service vsftpd start #新建用户 ...

  8. 【nginx】解决nginx搭建图片服务器访问图片404

    图片通过ftp服务上传到/home/ftpuser/www/images目录下后访问 http://192.168.128.128/images/xxx.jpg 还是 404 NOT FOUND ,解 ...

  9. Nginx 独立图片服务器的搭建

    为什么需要独立图片服务器? 如果你留心的话,可以发现,现在主流的网站都是有单独的图片服务器的,例如,人人网的为rrimg,淘宝的为taobaocdn,下面还有很多的二级域名. 独立的图片服务器有诸多好 ...

随机推荐

  1. .NET Framework基本概念

    http://blog.csdn.net/T573029173/article/details/41730101 .NET是微软的新一代技术平台.对技术人员来说,想真正了解什么是.NET,须先了解.N ...

  2. js的解析顺序 作用域 严格模式

    一.javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的.我们看一下下面的代码. 1 alert(a); 2 var a = 1; 如果执行顺序是从上到 ...

  3. php学习资料

    http://medoo.in/轻量级 PHP 连接数据库的类库 http://www.thinkphp.cn/国产 PHP 万金油框架,快速做项目,效率一般,BUG 众多

  4. fio2.1.10--HOWTO

    1.0 Overview and history    ------------------------ fio was originally written to save me the hassl ...

  5. （转）uml各类图

    原文:http://www.cnblogs.com/way-peng/archive/2012/06/11/2544932.html 一.UML是什么?UML有什么用? 二.UML的历史 三.UML的 ...

  6. SpringBoot的几个使用技巧

    SpringBoot的几个使用技巧 首先提供几个SpringBoot开发过程中常用的网站: Spring Boot官方文档:http://docs.spring.io/spring-boot/docs ...

  7. 笔记-测试崩溃之memcpy_s

    昨天晚上提测,今天早上测试发来贺电,程序崩溃!!!!!! 而问题出在memcpy_s errno_t memcpy_s( void *dest, size_t numberOfElements, co ...

  8. JS实现移动端购物车左滑删除功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  9. Lua5.3 注册表 _G _ENV

    Lua5.3 注册表 _G _ENV 来源:http://blog.csdn.net/murisly/article/details/46518551 注册表的描述,借用PIL中的一段话: regis ...

  10. 关于缓存问题：js清除缓存

    css并行加载,js串行加载(会阻塞页面) 清除缓存的问题: 1.一般手动清除,浏览器缓存 2.js代码清除缓存(原理:增加了一个参数,且该参数是一个随机数,每次都不一样,所以每次的请求参数都不一样, ...