FTP+SpringMVC+Uploadify实现带进度条多文件上传
由于长期做接口，从来都是研究数据库、字段、增删改。文件的上传下载有些接触，但是都是完全封装后的一个调用，很少接触那么深刻。那么，问题来了。之前忽然接到一个网站，其实很简单，就包括上传、下载、分页。但是一下就感觉晕了。首先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>
<!--/sidebar-->
<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 style = "margin-left:100px;"> -->
<!-- <inputtype="button" onclick = "javascript:$('#uploadify').uploadifyUpload()"value="上 传 "> -->
<!-- </div> -->
</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
privateUploadService 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) {
}
}
}
版权声明：本文为博主原创文章，未经博主允许不得转载。
页:
[1]