newstyles项目实战（九）图片的上传功能实现（一）

 图片保存位置分析：

关于上传图片我们考虑以下几个问题？

1.我们的图片放置到那个位置，第二个，我们图片怎么处理？我们怎么上传？

传统项目中，可以在web项目中添加一个文件夹，来存放上传的图片。例如在工程的根目录WebRoot下创建一个images文件夹。把图片存放在此文件夹中就可以直接使用在工程中引用。

优点：引用方便，便于管理

缺点：

1、如果是分布式环境图片引用会出现问题。

2、图片的下载会给服务器增加额外的压力。

  上传图像将图片上传到images，然后之后的人就可以到这个文件夹中访问图片，这个适用于规模不大的小型网站，比如说几百人，几千人访问的，并且呢，这些人也不会同时一起访问，不会对服务器造成很大的压力。所以对于小型web网站这么做完全可以。

     当然，如果随着使用的人数增加怎么办呢，我们可以通过增加服务器的数量，创建tomcat集群：

    在上传图片时，这时候可能是tomcat2提供服务，也可能是tomcat1提供，假如tomcat1上传图像，我们通过tomcat2来访问一下，结果可能会出现要么访问不到，要么刷新一下有，刷新一下没有，那怎么办？可以通过映射到同一个服务器的文件夹进行共享。（设想的一种方案）；

      那么在集群环境中怎么处理呢？

                                               

那么，如果将图片专门的上传到一个图片服务器，专门管理存放图片，一般的访问图片则通过http访问服务器，那么http服务由什么实现，一般的我们可以使用tomcat，对于业务逻辑，tomcat服务器可能会好一点，对于静态资源我们可以使用appache服务器，实现http服务器。这次使用nginx，来完成http服务。分布式环境一般都有一个专门的图片服务器存放图片。我们使用虚拟机搭建一个专门的服务器来存放图片。在此服务器上安装一个nginx来提供http服务，安装一个ftp服务器来提供图片上传服务。

     而对于上传图片我们则需要通过一种协议上传图片，也就是我们经常说的ftp，我们可以使用Linuix自带的ftp服务。这时候我们可以通过ftp上传到专门的图片服务器，范文图片不再通过tomcat了，可以直接的去访问图片服务器的内容了。

 搭建图片服务器

首先，安装Linux，我们使用的版本为 CentOS 6.4

第一步：安装vsftpd提供ftp服务（如何连接ftp和服务器）

第二步：安装nginx提供http服务

测试图片服务器

使用客户端程序 FileZilla客户端去访问图片服务器，输入地址，用户名和密码，用户名和密码都在配置ftp服务时配置过了，所以使用其用户名和密码进行登陆，注意其默认的端口为21端口：

测试成功。可以链接到自己搭建的图片服务器。

使用Java代码访问FTP服务

     在项目进行到一定程度后，将我们编写的java代码放置到建立的images文件夹下面。下面通过Java来访问FTP服务。这次使用appache提供的一个包叫做conmmon-net，我们需要在工程中依赖这个jar包。在之前的文件依赖中已经添加过了，所以我们开始编写代码。

    在newstyles-manager-web工程下面的test文件夹中，在创建一个测试类，测试代码上传：

public class FTPTest {

	@Test
	public void testFtpClient() throws Exception{
		//创建一个FtpClient
		FTPClient ftpClient = new FTPClient();
		//创建Ftp连接
		ftpClient.connect("124.16.108.65",21);
		//登陆Ftp服务器，使用账号和密码
		ftpClient.login("ftpuser", "****************");
		//上传文件
		//读取本地文件
		FileInputStream inputStream = new FileInputStream(new File("F:\\**********.jpg"));
		//设置上传的路径
		ftpClient.changeWorkingDirectory("/home/ftpuser/ww/images");
		
		//第一参数，服务器端的文件名。
		//第二个参数，上传文件的IO流
		ftpClient.storeFile("Hello1.jpg", inputStream);
		//关闭连接
		ftpClient.logout();
	}
}

    这样就可以把本地的文件上传到指定的路径，“/home/ftpuser/ww/images”文件夹下面，将jpg存放到对应的目录下面：

      检查文件存在，所以我们需要进行访问了，我们通过输入地址：http://124.16.108.65:80/images/Hello1.jpg来访问此文件，但是出现了报错，这个改怎么解决呢，这个是因为我们没有配置执行的访问的默认路径等，需要修改conf文件，并重新启动nginx,具体的可以按照此博客提示的方法修改nginx.conf文件。顺便说一句，如果感觉每次开机都需要重新配置比较麻烦，可以设置为开机自启动，并且实现配置。（这里是通过，发呢我你内网的方式测试的，可参考此博客）

      此时，我们可以启动ssh服务，使用浏览器访问一下：

页面测试成功。有些人上传后，可能会发现图像变的不清晰了，或者上传的图像打不开，这个怎么处理？

我们可以在上面写的测试类的存储路径设置的后面设置上传文件的格式，上传文件的格式不对也会使得图像打不开，变得不清晰等。

		ftpClient.setFileType(FTP.BINARY_FILE_TYPE );

    其中，可以看到，我们将上传的格式设置为二进制编码格式。上面的个过程要封装成一个工具类，这样的化可以供其他项目复用使用。提高代码的复用性，

下面是封装的工具类，需要将这个工具类放置到newstyles-common工程之中。

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

  图片上传的实现

     首先查看我们的jsp页面，其中有个图片上传的jsp，（item-add.jsp）。

   可以看到是通过easyui的函数来实现，可以查找其函数来查看，方式可以通过search下面的file，也可以使用Ctrl+H来查找：