转自https://blog.csdn.net/qq_36762765/article/details/79539251

html+ajax+jquery+ftpclient+nginx实现一个批量上传图片的功能。

先介绍一下，前端的代码：

①在前端html中使用file类型的input标签，

[html]  view plain  copy
  1. <input type="file" multiple="multiple" id="uploadImages">  

②js操作，获取file，存在一个fileStack数组中，并通过，jquery each方法，将图片回写

  到Html中。


    

[html]  view plain  copy
  1. $(function() {  
  2.   
  3.     // 图片上传  
  4.     fileStack = [];// 存放图片文件的数组  
  5.     // 当<input type="file">change时调用addFiles()  
  6.     $("#uploadImages").change(function() {  
  7.         addFiles();  
  8.     })  
  9.     // 删除操作，操作这个fileStack  
  10.     function addFiles() {  
  11.         var files = document.querySelector("input[type=file]");  
  12.         var filelist = files.files;// 选择图片列表  
  13.         $.each(filelist,function(i, file) {fileStack.push(file);  
  14.                             var reader = new FileReader();  
  15.                             reader.onload = function(e) {  
  16.                                 var result = this.result;  
  17.                                 var img = document.createElement("img");  
  18.                                 // img.src = result;  
  19.                                 var i = 0;  
  20.                                 $("#imagesUl").append("<li class='img_box' data-index='"  
  21.                                                         + (i++)  
  22.                                                         + "' draggable='true'><img src='"  
  23.                                                         + result  
  24.                                                         + "'><div class='img_cover'></div><div class='toolbar_wrap'>"  
  25.                                                         + "<div class='opacity'></div>"  
  26.                                                         + "<div class='toolbar'>"  
  27.                                                         + "<a href='javascript:;' class='edit'></a><a href='javascript:;' class='delete'></a></div></div></li>");  
  28.                             };  
  29.                             reader.readAsDataURL(file);  
  30.                         });  
  31.     }        })  

③提交数据到后台，用each方法将上述fileStack数组添加到formdata中

var formdata = new FormData();//定义一个formdata对象

[html]  view plain  copy
  1. $.each(fileStack, function(i, file) {// 所有文件都要放到同一个名字下面：如files  
  2. formdata.append("file", file);  
  3. });  
[html]  view plain  copy
  1. function submitMethod(formdata) {  
  2.     $.ajax({  
  3.         type : 'POST',  
  4.         url : "/tenement/uploadImages.action",  
  5.         dataType : 'json',  
  6.         data : formdata,  
  7.         cache : false,  
  8.         processData : false,  
  9.         contentType : false,  
  10.         success : function(responseStr) {  
  11.             if (responseStr == "1") {  
  12.                 swal("发布成功,信息审核中", "", "success");  
  13.             } else {  
  14.                 swal("发布失败,未知错误", "", "error");  
  15.             }  
  16.         },  
  17.         error : function(responseStr) {  
  18.             swal("发布失败,未知错误", "", "error");  
  19.         }  
  20.     });  
  21. }  

后台代码：

Controller层代码：

[java]  view plain  copy
  1. /** 
  2.  * 数据上传 
  3.  *  
  4.  * @param albumId 
  5.  * @param files 
  6.  * @return 
  7.  * @throws IOException 
  8.  */  
  9. @RequestMapping("/uploadImages.action")  
  10. public @ResponseBody String uploadFiles(@RequestParam("albumId") Integer albumId,  
  11.         @RequestParam("file") MultipartFile[] files) throws IOException {  
  12.     logger.info("【上传图片controller】");  
  13.     FtpConfig ftpConfig = new FtpConfig();  
  14.     List<Photo> photoList = new ArrayList<Photo>();  
  15.   
  16.     for (MultipartFile file : files) {  
  17.         Photo photo = new Photo();  
  18.         String oldName = file.getOriginalFilename();// 获取图片原来的名字  
  19.         String picNewName = UploadUtils.generateRandonFileName(oldName);// 通过工具类产生新图片名称，防止重名  
  20.         String picSavePath = UploadUtils.generateRandomDir(picNewName);// 通过工具类把图片目录分级  
  21.         /* 
  22.          * photo.setPhotoUrl(picSavePath + "/");// 
  23.          * 设置图片的url--》就是存储到数据库的字符串url photo.setAlbumId(albumId);// 
  24.          * 设置图片所属相册id photo.setUser_id("wk"); 
  25.          * photo.setPhoteName(picNewName); 
  26.          */  
  27.         photoList.add(photo);  
  28.         FtpUtil.pictureUploadByConfig(ftpConfig, picNewName, picSavePath, file.getInputStream());// 上传到图片服务器的操作  
  29.         // 添加到数据库  
  30.     }  
  31.     iPhotoService.uploadImages(photoList);  
  32.     return state.Success;  
  33. }  

UploadUtils.java，获得文件新名字，生成一二级目录

[java]  view plain  copy
  1. package com.tenement.utils.ftp_images_server;  
  2.   
  3. import java.io.File;  
  4. import java.util.UUID;  
  5.   
  6. public class UploadUtils {  
  7.   
  8.     /** 
  9.      * 得到真实文件名 
  10.      *  
  11.      * @param fileName 
  12.      * @return 
  13.      */  
  14.     public static String subFileName(String fileName) {  
  15.         // 查找最后一个 \ (文件分隔符)位置  
  16.         int index = fileName.lastIndexOf(File.separator);  
  17.         if (index == -1) {  
  18.             // 没有分隔符，说明是真实名称  
  19.             return fileName;  
  20.         } else {  
  21.             return fileName.substring(index + 1);  
  22.         }  
  23.     }  
  24.   
  25.     /** 
  26.      * 获得随机UUID文件名 
  27.      *  
  28.      * @param fileName 
  29.      * @return 
  30.      */  
  31.     public static String generateRandonFileName(String fileName) {  
  32.         // 首相获得扩展名，然后生成一个UUID码作为名称，然后加上扩展名  
  33.         String ext = fileName.substring(fileName.lastIndexOf("."));  
  34.         return UUID.randomUUID().toString() + ext;  
  35.     }  
  36.   
  37.     public static String generateRandonFileName() {  
  38.         return UUID.randomUUID().toString();  
  39.     }  
  40.   
  41.     /** 
  42.      * 获得hashcode 生成二级目录 
  43.      *  
  44.      * @param uuidFileName 
  45.      * @return 
  46.      */  
  47.     public static String generateRandomDir(String uuidFileName) {  
  48.         int hashCode = uuidFileName.hashCode();// 得到它的hashcode编码  
  49.         // 一级目录  
  50.         int d1 = hashCode & 0xf;  
  51.         // 二级目录  
  52.         int d2 = (hashCode >> 4) & 0xf;  
  53.         return "/" + d1 + "/" + d2;  
  54.     }  
  55.   
  56.     public static void main(String[] args) {  
  57.         System.out.println(generateRandonFileName());  
  58.     }  
  59. }  

FtpUtil.java，上传文件到服务器上的工具类

[java]  view plain  copy
  1. package com.tenement.utils.ftp_images_server;  
  2.   
  3. import java.io.File;  
  4. import java.io.FileOutputStream;  
  5. import java.io.IOException;  
  6. import java.io.InputStream;  
  7. import java.io.OutputStream;  
  8. import org.apache.commons.logging.Log;  
  9. import org.apache.commons.logging.LogFactory;  
  10. import org.apache.commons.net.ftp.FTP;  
  11. import org.apache.commons.net.ftp.FTPClient;  
  12. import org.apache.commons.net.ftp.FTPFile;  
  13. import org.apache.commons.net.ftp.FTPReply;  
  14.   
  15. /** 
  16.  * 正在使用 
  17.  * @author wk 
  18.  * 
  19.  */  
  20. public class FtpUtil {  
  21.   
  22.     private static final Log logger = LogFactory.getLog(FtpUtil.class);  
  23.     public static String pictureUploadByConfig(FtpConfig ftpConfig, String picNewName, String picSavePath,  
  24.             InputStream inputStream) throws IOException {  
  25.         logger.info("【pictureUploadByConfig】");  
  26.         String picHttpPath = null;  
  27.   
  28.         boolean flag = uploadFile(ftpConfig.getFTP_ADDRESS(), ftpConfig.getFTP_PORT(), ftpConfig.getFTP_USERNAME(),  
  29.                 ftpConfig.getFTP_PASSWORD(), ftpConfig.getFTP_BASEPATH(), picSavePath, picNewName, inputStream);  
  30.   
  31.         if (!flag) {  
  32.             return picHttpPath;  
  33.         }  
  34.         picHttpPath = ftpConfig.getIMAGE_BASE_URL() + picSavePath + "/" + picNewName;  
  35.         logger.info("【picHttpPath】"+picHttpPath);  
  36.         return picHttpPath;  
  37.     }  
  38.   
  39.     /** 
  40.      * Description: 向FTP服务器上传文件 
  41.      *  
  42.      * @param host 
  43.      *            FTP服务器hostname 
  44.      * @param port 
  45.      *            FTP服务器端口 
  46.      * @param username 
  47.      *            FTP登录账号 
  48.      * @param password 
  49.      *            FTP登录密码 
  50.      * @param basePath 
  51.      *            FTP服务器基础目录 
  52.      * @param filePath 
  53.      *            FTP服务器文件存放路径。 
  54.      * @param filename 
  55.      *            上传到FTP服务器上的文件名 
  56.      * @param input 
  57.      *            输入流 
  58.      * @return 成功返回true，否则返回false 
  59.      */  
  60.     public static boolean uploadFile(String host, String ftpPort, String username, String password, String basePath,  
  61.             String filePath, String filename, InputStream input) {  
  62.         int port = Integer.parseInt(ftpPort);  
  63.         boolean result = false;  
  64.         FTPClient ftp = new FTPClient();  
  65.         try {  
  66.             int reply;  
  67.             ftp.connect(host, port);// 连接FTP服务器  
  68.             // 如果采用默认端口，可以使用ftp.connect(host)的方式直接连接FTP服务器  
  69.             ftp.login(username, password);// 登录  
  70.             reply = ftp.getReplyCode();  
  71.             if (!FTPReply.isPositiveCompletion(reply)) {  
  72.                 ftp.disconnect();  
  73.                 return result;  
  74.             }  
  75.             // 切换到上传目录  
  76.             if (!ftp.changeWorkingDirectory(basePath + filePath)) {  
  77.                 // 如果目录不存在创建目录  
  78.                 String[] dirs = filePath.split("/");  
  79.                 String tempPath = basePath;  
  80.                 for (String dir : dirs) {  
  81.                     if (null == dir || "".equals(dir))  
  82.                         continue;  
  83.                     tempPath += "/" + dir;  
  84.                     if (!ftp.changeWorkingDirectory(tempPath)) {  
  85.                         if (!ftp.makeDirectory(tempPath)) {  
  86.                             return result;  
  87.                         } else {  
  88.                             ftp.changeWorkingDirectory(tempPath);  
  89.                         }  
  90.                     }  
  91.                 }  
  92.             }  
  93.             // 设置上传文件的类型为二进制类型  
  94.             ftp.setFileType(FTP.BINARY_FILE_TYPE);  
  95.             ftp.enterLocalPassiveMode();// 这个设置允许被动连接--访问远程ftp时需要  
  96.             // 上传文件  
  97.             if (!ftp.storeFile(filename, input)) {  
  98.                 return result;  
  99.             }  
  100.             input.close();  
  101.             ftp.logout();  
  102.             result = true;  
  103.         } catch (IOException e) {  
  104.             e.printStackTrace();  
  105.         } finally {  
  106.             if (ftp.isConnected()) {  
  107.                 try {  
  108.                     ftp.disconnect();  
  109.                 } catch (IOException ioe) {  
  110.                 }  
  111.             }  
  112.         }  
  113.         return result;  
  114.     }  
  115. }  

FtpConfig.java实体类

[java]  view plain  copy
  1. package com.tenement.utils.ftp_images_server;  
  2.   
  3. /** 
  4.  * ftp服务器配置实体类 
  5.  *  
  6.  * @author wk 
  7.  * 
  8.  */  
  9. public class FtpConfig {  
  10.   
  11.     /** 
  12.      * 获取IP地址 
  13.      */  
  14.     private String FTP_ADDRESS = "服务器ip地址";  
  15.   
  16.     /** 
  17.      * 端口号 
  18.      */  
  19.     private String FTP_PORT = "21";  
  20.   
  21.     /** 
  22.      * 用户名 
  23.      */  
  24.     private String FTP_USERNAME = "ftp用户名";  
  25.   
  26.     /** 
  27.      * 密码 
  28.      */  
  29.     private String FTP_PASSWORD = "ftp用户密码";  
  30.   
  31.     /** 
  32.      * 基本路径，用户图片 
  33.      */  
  34.     private String FTP_BASEPATH = "/home/ftptest/tenement/house_images";  
  35.   
  36.     /** 
  37.      * 下载地址地基础url，这个是配置的图片服务器的地址,最后访问图片时候，需要用该基础地址     
  38.      */  
  39.     private String IMAGE_BASE_URL = "url";  
  40.   
  41.     public String getFTP_ADDRESS() {  
  42.         return FTP_ADDRESS;  
  43.     }  
  44.   
  45.     public void setFTP_ADDRESS(String fTP_ADDRESS) {  
  46.         FTP_ADDRESS = fTP_ADDRESS;  
  47.     }  
  48.   
  49.     public String getFTP_PORT() {  
  50.         return FTP_PORT;  
  51.     }  
  52.   
  53.     public void setFTP_PORT(String fTP_PORT) {  
  54.         FTP_PORT = fTP_PORT;  
  55.     }  
  56.   
  57.     public String getFTP_USERNAME() {  
  58.         return FTP_USERNAME;  
  59.     }  
  60.   
  61.     public void setFTP_USERNAME(String fTP_USERNAME) {  
  62.         FTP_USERNAME = fTP_USERNAME;  
  63.     }  
  64.   
  65.     public String getFTP_PASSWORD() {  
  66.         return FTP_PASSWORD;  
  67.     }  
  68.   
  69.     public void setFTP_PASSWORD(String fTP_PASSWORD) {  
  70.         FTP_PASSWORD = fTP_PASSWORD;  
  71.     }  
  72.   
  73.   
  74.   
  75.     public String getIMAGE_BASE_URL() {  
  76.         return IMAGE_BASE_URL;  
  77.     }  
  78.   
  79.     public void setIMAGE_BASE_URL(String iMAGE_BASE_URL) {  
  80.         IMAGE_BASE_URL = iMAGE_BASE_URL;  
  81.     }  
  82.   
  83.     public String getFTP_BASEPATH() {  
  84.         return FTP_BASEPATH;  
  85.     }  
  86.   
  87.     public void setFTP_BASEPATH(String fTP_BASEPATH) {  
  88.         FTP_BASEPATH = fTP_BASEPATH;  
  89.     }  
  90.   
  91. }  

在这之前在项目pom.xml引入相关jar包

[html]  view plain  copy
  1. <!-- 加入上传文件组件 -->    
  2. <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->    
  3. <dependency>    
  4.   <groupId>commons-io</groupId>    
  5.   <artifactId>commons-io</artifactId>    
  6.   <version>2.1</version>    
  7. </dependency>    
  8. <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->    
  9. <dependency>    
  10.   <groupId>commons-fileupload</groupId>    
  11.   <artifactId>commons-fileupload</artifactId>    
  12.   <version>1.3</version>    
  13. </dependency>    
  14. <!-- https://mvnrepository.com/artifact/commons-net/commons-net -->    
  15. <dependency>    
  16.   <groupId>commons-net</groupId>    
  17.   <artifactId>commons-net</artifactId>    
  18.   <version>3.3</version>    
  19. </dependency>  

整体思路：

    前台获取获取file数组，传到后台，使用ftpclient类，将file传到linux服务器

上，在数据库中存储的是图片的一二级目录和图片新名字。

最后访问时通过nginx反向代理功能来访问服务器上的图片

如何利用Nginx搭建图片服务器参照博客：

https://blog.csdn.net/qq_36762765/article/details/79539226

参考：https://blog.csdn.net/maoyuanming0806/article/details/78068091

GitHub 加速计划 / li / linux-dash
10.39 K
1.2 K
下载
A beautiful web dashboard for Linux
最近提交(Master分支：2 个月前 )
186a802e added ecosystem file for PM2 4 年前
5def40a3 Add host customization support for the NodeJS version 4 年前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区