ssm上传图片文件到ftp（图片压缩处理）

##ssm上传图片文件到ftp（图片压缩处理） ##

---

开发工具 Eclipse

---

1.引入jar包

jar包下载地址：阿里中央仓库

2.配置spring-mvc.xml，添加以下代码

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    
	     	<property name="defaultEncoding" value="utf-8"</property>
     	<!-- 上传图片最大大小5M=5242440 , 10MB=10*1024*1024=10485760字节 20=20971520-->     
     	<property name="maxUploadSize" value="20971520"></property>    
</bean>

3.添加上传文件工具类 FtpUtil.java

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

import org.apache.commons.net.ftp.FTP;
import org.apache.commons.net.ftp.FTPClient;
import org.apache.commons.net.ftp.FTPReply;
import org.apache.tomcat.util.codec.binary.Base64;
import org.springframework.mock.web.MockMultipartFile;
import org.springframework.web.multipart.MultipartFile;

/**
 * 上传文件工具类
 * 
 * 2017-12-23
 * @author Liner
 *
 */
public class FtpUtil {

	private static FTPClient ftpClient = new FTPClient();
	private static String encoding = System.getProperty("file.encoding");

	/**
	 * Description: 向FTP服务器上传文件
	 * 
	 * @Version1.0
	 * 
	 * @param url
	 *            FTP服务器hostname
	 * @param port
	 *            FTP服务器端口
	 * @param username
	 *            FTP登录账号
	 * @param password
	 *            FTP登录密码
	 * @param path
	 *            FTP服务器保存目录,如果是根目录则为“/”
	 * 
	 * @param  base64  数组， 前台返回的图片数据格式
	 * 
	 * @return 返回服务器访问链接
	 */
	public static  List<String> uploadBase64(String url, int port, String username, String password, String path, String[] base64_files) {
		List<String>  savelist=new ArrayList<>();

		try {
			int reply;
			// 如果采用默认端口，可以使用ftp.connect(url)的方式直接连接FTP服务器
			ftpClient.connect(url);
			// ftp.connect(url, port);// 连接FTP服务器
			// 登录
			ftpClient.login(username, password);
			ftpClient.setControlEncoding(encoding);
			// 检验是否连接成功
			reply = ftpClient.getReplyCode();
			if (!FTPReply.isPositiveCompletion(reply)) {
				System.out.println("连接失败");
				ftpClient.disconnect();
				return savelist;
			}
			// 判断文件夹是否已经存在，不存在则创建
			boolean isExit = ftpClient.makeDirectory(path);
			if (isExit) {
				System.out.println("文件夹创建成功");
			} else {
				System.out.println("文件夹已存在");
			}
			// 转移工作目录至指定目录下
			boolean change = ftpClient.changeWorkingDirectory(path);
			ftpClient.setFileType(FTP.BINARY_FILE_TYPE);
			if (change) {
				
				MultipartFile file;
				for (String base64 : base64_files) {
					
					if (!base64.isEmpty()) {
						
						//解析base64
						byte[] b = Base64.decodeBase64(base64);
						for (int i = 0; i < b.length; ++i) {
							if (b[i] < 0) {// 调整异常数据
								b[i] += 256;
							}
						}
						//文件名称
						String fileName = String.valueOf(System.currentTimeMillis())+".jpg";// 文件名 比如a.jpg
						file=new MockMultipartFile(fileName, b);//转换为file
						System.out.println("文件名：" + fileName);
						
						// 自定义的文件名称
						// System.out.println("执行上传方法！");
						Boolean bool = ftpClient.storeFile(new String(fileName.getBytes(encoding), "iso-8859-1"),file.getInputStream() );
						if (bool) {
							System.out.println("ok！");
							// 访问链接，保存到数据库
							String savePath = WeiXinConfig.FTP_HOST + ":" + WeiXinConfig.FTP_PORT + path
									+ File.separator + fileName;
							System.out.println(savePath);
							savelist.add(savePath);
						}
					}
				}
				
			}
			ftpClient.logout();
		} catch (IOException e) {
			e.printStackTrace();
		} finally {
			if (ftpClient.isConnected()) {
				try {
					ftpClient.disconnect();
				} catch (IOException ioe) {
				}
			}
		}
		return savelist;
	}
}

4.Action 响应代码

	/**
	 *  上传图片（多个文件）
	 *  Liner 2017-12-19
	 * @param files
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	@ResponseBody
	@RequestMapping(value = "/uploadImagesBase", produces = "application/json; charset=UTF-8")
	public Object uploadImagesBase(@RequestParam("files") String[] files, HttpServletRequest request,HttpServletResponse response) throws Exception {

		//@RequestParam("files") MultipartFile[] files,
		//System.out.println("准备上传文件！");
		JSONObject json=new JSONObject();
		for(int i=0;i<files.length;i++){
			System.out.println(files[i]);
		}
		String msg="";
		if(files.length>0){
			String path = File.separator + TimeUtil.getShortDateString();
			
			// 调用上传文件接口
			List<String> savePath=FtpUtil.uploadBase64(WeiXinConfig.FTP_HOST, WeiXinConfig.FTP_PORT,
							WeiXinConfig.FTP_USER_NAME, WeiXinConfig.FTP_PASSWORD, WeiXinConfig.FTP_BASEPATH + path,files);
			json.accumulate("savepath", savePath);
			
			if(savePath.size()>0){
				 msg="ok";
			}else{
				 msg="error";
			}
			
		}else{
			
			msg="files is null";
		}
		json.accumulate("msg", msg);
		
		return JSONSerializer.toJSON(json);
	}

5.页面代码（部分代码参考）

参考链接：[https://www.cnblogs.com/guandekuan/p/6739190.html]

（1）.选择文件监听

//选择文件监听事件（单个）
			$("#selectfile").change(function(e) {

				var files = e.target.files || e.dataTransfer.files;
				//console.log(files);

				var file = files[0];
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					var fileName = file.name; //文件名
					//var src = this.result;//

					//var index = fileName.lastIndexOf(".");
					//var filefix = fileName.substring(index, fileName.length); //文件拓展名
					msgShow('图片正在处理,请稍等...');
					lrz(file, {
							width: 640
						})
						.then(function(rst) {
							console.log(rst);
							//计算文件大小
							//var size=Math.round(rst.fileLen/1024*100)/100;
							//console.log(size);
							img_count++;
							count++;
							var img_id = 'img' + count; //图片展示ID
							var file_id = 'file' + count; //文件ID
							imagesList.push(file_id); //保存ID到数组
							var base = rst.base64; //base64字符串
							//重命名文件

							console.log(file);
							file_map.put(file_id, base.split(',')[1]); //保存到文件集合

							var html = '<span class="img-item" id=' + img_id + ' >' + '<img src=' + base + ' />' +
								'<a class="img-delete" href="javascript:;" onclick="delImg(' + count + ')"><span class="mui-icon mui-icon-closeempty"></span></a></span>';
							$("#image-list").append(html); //追加显示图片预览

						}).always(function() {
							//无论是否压缩成功，都执行	
						});
				}
				$('#selectfile').val(''); //初始化
			});

（2）.上传文件代码

		//提交（上传文件方法)
		function release() {
			
			
			//判断是否需要上传图片
			if(imagesList.length>0){
				//加载动画
				layer.open({
					type: 2,
					shadeClose: false,
					content: '正在上传文件到服务器，请稍等...',
				});
				
				var url = "${ctx}/uploadImagesBase.do";
				var formData = new FormData(); // 实例化上传方法
				var file;
				//把base64格式的文件添加到formData
				for(var i = 0; i < imagesList.length; i++) {
					file = file_map.get(imagesList[i]);
					formData.append("files", file);
				}
				
				var xhr = new XMLHttpRequest();
				xhr.upload.addEventListener("progress", uploadProgress, false);
				xhr.addEventListener("load", uploadComplete, false);
				xhr.addEventListener("error", uploadFailed, false);
				xhr.addEventListener("abort", uploadCanceled, false);
				xhr.open("POST", url,true);//post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
				xhr.send(formData); //开始上传，发送form数据 
			}else{
				//没有图片需要上传，直接提交
				submit();//提交
			}
		}
		
		// 开始上传
		function uploadProgress(evt) {
			// 不做处理

		}
		// 上传完成方法
		function uploadComplete(evt) {
			
			console.log(evt);
			var data = JSON.parse(evt.target.responseText);
			if(data.msg == 'ok') {
				//获取返回路径
				layer.closeAll();
				saveList=data.savepath;
				console.log(saveList);
				if(saveList.length==img_count){
					//msgShow("上传成功！");
					submit();//提交
					
				}else{
					msgShow("部分图片上传失败，请检查网络！");
				}
			} else {
				layer.closeAll();
				msgShow("上传失败！");
			}
		}
		// 上传出错方法
		function uploadFailed(evt) {
			// 弹出层
			msgShow('图片上传失败!');

		}
		//
		function uploadCanceled(evt) {
			//弹出层
			msgShow('图片上传已由用户或浏览器取消删除连接!');
		}
		function msgShow(msg){
			//提示
			layer.open({
				content: msg,
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
		}

6.需要注意的问题
问题1： http://blog.csdn.net/lingirl/article/details/1714806
问题2： 压缩后的base转file文件提交，IOS会出现没法提交的问题

示例代码：JS图片压缩Demo