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

lihu129c · 发表于 2015-11-6 11:19:14

由于长期做接口，从来都是研究数据库、字段、增删改。文件的上传下载有些接触，但是都是完全封装后的一个调用，很少接触那么深刻。那么，问题来了。之前忽然接到一个网站，其实很简单，就包括上传、下载、分页。但是一下就感觉晕了。首先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) {
   }
  }
}
      版权声明：本文为博主原创文章，未经博主允许不得转载。

账号		自动登录	找回密码
密码			立即注册

大疆运维招人啦，

C++ :try 语句块和异常处理

C++的多态

Red Hat RHCE 8 (EX294) Cert Guide

Java/C++ 区别：看完这一篇，就够用！

别再用过时库了！这 13 个顶级 C++ 库才是

c++ size_t 和 int 的区别

[经验分享] FTP+SpringMVC+Uploadify实现带进度条多文件上传

扫码加入运维网微信交流群