##ssm上传图片文件到ftp（图片压缩处理） ##
开发工具 Eclipse
1.引入jar包
jar包下载地址：阿里中央仓库
2.配置spring-mvc.xml，添加以下代码
<bean id="multipartResolver" class="org.springframework.monsMultipartResolver"> <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 .ftp.FTP;import .ftp.FTPClient;import .ftp.FTPReply;import org.apache.tomcat.util.codec.binary.Base64;import org.springframework.mock.web.MockMultipartFile;import org.springframework.web.multipart.MultipartFile;/*** 上传文件工具类* * -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()) {//解析base64byte[] 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.jpgfile=new MockMultipartFile(fileName, b);//转换为fileSystem.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 -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.页面代码（部分代码参考）
参考链接：[/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; //图片展示IDvar file_id = 'file' + count; //文件IDimagesList.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格式的文件添加到formDatafor(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： /lingirl/article/details/1714806
问题2： 压缩后的base转file文件提交，IOS会出现没法提交的问题
示例代码：JS图片压缩Demo
