FTP+SpringMVC+Uploadify实现带进度条多文件上传

最新推荐文章于 2019-07-29 10:48:29 发布

金牛不懂不懂

最新推荐文章于 2019-07-29 10:48:29 发布

阅读量2.3k

点赞数

分类专栏： Java 文章标签： ftP springmvc

本文链接：https://blog.csdn.net/u010810559/article/details/45742811

版权

Java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何结合FTP、SpringMVC和Uploadify来实现在网页上进行多文件上传并显示进度条的功能。通过前端HTML和JavaScript的Uploadify插件与后端SpringMVC控制器交互，完成文件的选取和上传，并在服务器端使用FTPUtil类将文件存储到FTP服务器。示例代码展示了具体的实现步骤，包括前端页面配置、后端控制器处理和FTP文件上传方法。

摘要由CSDN通过智能技术生成

由于长期做接口，从来都是研究数据库、字段、增删改。文件的上传下载有些接触，但是都是完全封装后的一个调用，很少接触那么深刻。那么，问题来了。之前忽然接到一个网站，其实很简单，就包括上传、下载、分页。但是一下就感觉晕了。首先js长期不接触，手生了，然后就只能慢慢研究了，各种试。经过4天的工作日以及加班终于完成了这个简单又困难的问题。下载和分页的代码之前已经发了，现在是上传的代码

web前端：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="${cxt}/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="${cxt}/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="${cxt}/js/jquery.uploadify-v2.1.4/uploadify.css"/>
    <script type="text/javascript" src="${cxt}/js/jquery-1.7.1min.js"></script>
    <script type="text/javascript" src="${cxt}/js/jquery.uploadify-v2.1.4/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
    $(document).ready(
      function() {

      var uf_mob=$('#uf_mob').val();

      if(uf_mob==null||uf_mob==''){

        alert("会话已超时请您重新登录");
        location.href="${cxt}/index.jsp";
      }

      });



    $(document).ready(function () {
         $("#uploadify").uploadify({
         'swf' : '${cxt}/js/jquery.uploadify-v2.1.4/uploadify.swf',//控件flash文件位置
                 //后台处理的请求（也就是action请求路径），后面追加了jsessionid，用来标示使用当前session（默认是打开新的session，会导致存在session校验的请求中产生302错误）
                 'uploader' : '${cxt}/uploadFiles',
     'queueID' : 'fileQueue',//与下面HTML的div.id对应
     'width' : '100',//按钮宽度
     'height' : '32',//按钮高度
     'fileTypeDesc' : '*.JPG;*.PNG;*.TXT;*.PDF;*.EXCEL;*.TMP;*.PDF;',
     'fileTypeExts' : '*.jpg;*.png;*.txt;*.pdf;*.excel;*.tmp;*.pdf', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
     'buttonText' : '批量上传',//上传按钮显示内容，还有个属性可以设置按钮的背景图片
     'fileSizeLimit' : '2048KB',
     'multi' : true,
     'onFallback' : function() {//检测FLASH失败调用
         alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
     },

         });
     });

</script>
    </head>
<body>
<div class="topbar-wrap white">
    <div class="topbar-inner clearfix">
        <div class="topbar-logo-wrap clearfix">
            <h1 class="topbar-logo"><a href="index.html" class="navbar-brand">资料管理库</a></h1>
        </div>
        <div class="top-info-wrap">
            <ul class="top-info-list clearfix">
                <li><a href="${cxt}/index.jsp">退出</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container clearfix">
    <div class="sidebar-wrap">
        <div class="sidebar-content">
            <ul class="sidebar-list">
                <li>
                    <a href ="${cxt}/mobLogin/getDetailList?uf_mob=${userMap.UF_MOB}"><img class="icon-font" src="${cxt}/images/fill.png"/>个人信息</a>
                </li>
                <li>
                    <a href="${cxt}/mobLogin/getFileList"><img class="icon-font" src="${cxt}/images/down.png" />下载资料</a>
                </li>
    <li>
                  <c:if test="${userMap.GROUPNAME=='培训部'}">
        <a href="${cxt}/mobLogin/fileUpload"><img class="icon-font" src="${cxt}/images/up.png"/>上传资料</a>
      </c:if>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="main-wrap">
        <div class="result-wrap" id = "fileQueue">
            <div class="result-title">
                <h1>上传资料</h1>
            </div>
            <input type="file" multiple = "multiple" name="uploadify" id="uploadify" ><br/><br/><br/>



        </div>
    </div>
</div>
<input type="hidden" id="uf_mob" value="${userMap.UF_MOB}"/>
</body>
</html>

web后端

package mob.controller;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import mob.service.UploadService;
import mob.util.CalendarUtil;
import mob.util.Constants;
import mob.util.FTPUtil;
import mob.util.FileUpload;
import mob.util.FileUtil;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
//
//import com.gq.core.utils.FileUpload;

/**
*
* @ClassName: UploadifyTestController
* @Description: uploadify测试
* @author yangfei.eng@gmail.com
* @date 2014-6-14 下午18:45:02
* @version V1.0
*/
@Controller
public class UploadifyController {

@Autowired
private UploadService service;

/**
* @Title: uploadFiles
* @Description: 文件上传
* @param request
* @param response
*/
@SuppressWarnings("unchecked")
@RequestMapping("/uploadFiles")
public void uploadFiles(HttpServletRequest request,HttpServletResponse response) throws Exception {

  //转型为MultipartHttpRequest
  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
  //获得文件到map容器
  Map<String,MultipartFile> fileMap = multipartRequest.getFileMap();

  FTPUtil aFTPUtil = new FTPUtil();
  aFTPUtil.connectServer(Constants.DEFAULT_FTP_IP, Constants.DEFAULT_FTP_PORT,
    Constants.DEFAULT_FTP_USER,Constants.DEFAULT_FTP_PASS, Constants.FCK_UPLOAD_PATH);
        for(Map.Entry<String, MultipartFile> entry : fileMap.entrySet()) {
        MultipartFile file = (MultipartFile)entry.getValue();
        if(file.getSize() > 0 ) {
          byte [] bytes = file.getBytes();
          byte [] compactBytes = bytes;

          String fullPath = Constants.FCK_UPLOAD_PATH+ "/" + file.getOriginalFilename();
          if(fullPath.indexOf("*.png")<0 &&fullPath.indexOf("*.gif")<0 &&fullPath.indexOf("*.tmp")<0)
          {
           FileUpload.upload(fullPath,bytes);
          }else{

           String compactUrl = "/compactImage" + FileUtil.getMillisFileName(file.getOriginalFilename());
              FileUpload.upload(compactUrl,compactBytes);
          }
        }

        if(request.getSession().getAttribute("userMap") != null && !"".equals(request.getSession().getAttribute("userMap"))){
          Map map = new HashMap();
            map.put("id", CalendarUtil.UUID());
            map.put("file_name", file.getOriginalFilename());
            map.put("file_path", Constants.FCK_UPLOAD_PATH);
          map.put("add_person", ((Map)request.getSession().getAttribute("userMap")).get("UF_MOB")+"");
            map.put("file_describe", "");
            map.put("download_count", 0);

            //数据库中添加一条记录
                this.service.addFileData(map);
        }



        }
}
}

/**
* 文件上传
* @param fullName 上传文件放在服务器上的全路径
* @param dataInputStream 需要上传的byte[]
* @throws Exception
*/
public static void upload(String fullName,byte[] bytes) throws Exception {
  String path = fullName.substring(0,fullName.lastIndexOf("/"));
  String name = fullName.substring(fullName.lastIndexOf("/")+1);
  FTPUtil.getFtpClient(path).uploadFile(new ByteArrayInputStream(bytes), name);
}

/**
     * please see sample code in method main
     *
     * @param dataInputStream
     * @param remoteFileName
     * @throws Exception
     */
    public void uploadFile(InputStream dataInputStream, String remoteFileName)
     throws Exception {
  try {
      // need to encode
      remoteFileName = CommonUtil.getString(remoteFileName, CoreConstants.ENCODING_GBK,
       CoreConstants.ENCODING_ISO8859_1);
      boolean rtnResult = ftpClient.storeFile(remoteFileName, dataInputStream);
      if (!rtnResult) {
   throw new Exception("Fail to upload file to ftp server.");
      }
  } catch (Exception e) {
      log.error("uploadFile file failed.", e);
      throw new Exception(e);
  } finally {
      try {
   closeServer();
      } catch (Exception e) {
      }
  }
    }