一、 功能性需求與非功能性需求
要求操作便利，一次選擇多個文件和文件夾進行上傳；
支持PC端全平台操作系統，Windows,Linux,Mac
支持文件和文件夾的批量下載，斷點續傳。刷新頁面后繼續傳輸。關閉瀏覽器后保留進度信息。
支持文件夾批量上傳下載，服務器端保留文件夾層級結構，服務器端文件夾層級結構與本地相同。
支持大文件批量上傳（20G）和下載，同時需要保證上傳期間用戶電腦不出現卡死等體驗；
支持文件夾上傳，文件夾中的文件數量達到1萬個以上，且包含層級結構。
支持斷點續傳，關閉瀏覽器或刷新瀏覽器后仍然能夠保留進度。
支持文件夾結構管理，支持新建文件夾，支持文件夾目錄導航
交互友好，能夠及時反饋上傳的進度；
服務端的安全性，不因上傳文件功能導致JVM內存溢出影響其他功能使用；
最大限度利用網絡上行帶寬，提高上傳速度；
二、 設計分析
對於大文件的處理，無論是用戶端還是服務端，如果一次性進行讀取發送、接收都是不可取，很容易導致內存問題。所以對於大文件上傳，采用切塊分段上傳
從上傳的效率來看，利用多線程並發上傳能夠達到最大效率。
三、解決方案：
文件上傳頁面的前端可以選擇使用一些比較好用的上傳組件，例如百度的開源組件WebUploader，澤優軟件的up6，這些組件基本能滿足文件上傳的一些日常所需功能，如異步上傳文件，文件夾，拖拽式上傳，黏貼上傳，上傳進度監控，文件縮略圖，甚至是大文件斷點續傳，大文件秒傳。
在web項目中上傳文件夾現在已經成為了一個主流的需求。在OA，或者企業ERP系統中都有類似的需求。上傳文件夾並且保留層級結構能夠對用戶行成很好的引導，用戶使用起來也更方便。能夠提供更高級的應用支撐。
文件夾數據表結構
CREATE TABLE IF NOT EXISTS `up6_folders` (
`f_id` char(32) NOT NULL ,
`f_nameLoc` varchar(255) default '',
`f_pid` char(32) default '',
`f_uid` int(11) default '0',
`f_lenLoc` bigint(19) default '0',
`f_sizeLoc` varchar(50) default '0',
`f_pathLoc` varchar(255) default '',
`f_pathSvr` varchar(255) default '',
`f_pathRel` varchar(255) default '',
`f_folders` int(11) default '0',
`f_fileCount` int(11) default '0',
`f_filesComplete` int(11) default '0',
`f_complete` tinyint(1) default '0',
`f_deleted` tinyint(1) default '0',
`f_time` timestamp NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
`f_pidRoot` char(32) default '',
PRIMARY KEY (`f_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
文件數據表結構
CREATE TABLE IF NOT EXISTS `up6_files` (
`f_id` char(32) NOT NULL,
`f_pid` char(32) default '', /*父級文件夾ID*/
`f_pidRoot` char(32) default '', /*根級文件夾ID*/
`f_fdTask` tinyint(1) default '0', /*是否是一條文件夾信息*/
`f_fdChild` tinyint(1) default '0', /*是否是文件夾中的文件*/
`f_uid` int(11) default '0',
`f_nameLoc` varchar(255) default '', /*文件在本地的名稱（原始文件名稱）*/
`f_nameSvr` varchar(255) default '', /*文件在服務器的名稱*/
`f_pathLoc` varchar(512) default '', /*文件在本地的路徑*/
`f_pathSvr` varchar(512) default '', /*文件在遠程服務器中的位置*/
`f_pathRel` varchar(512) default '',
`f_md5` varchar(40) default '', /*文件MD5*/
`f_lenLoc` bigint(19) default '0', /*文件大小*/
`f_sizeLoc` varchar(10) default '0', /*文件大小（格式化的）*/
`f_pos` bigint(19) default '0', /*續傳位置*/
`f_lenSvr` bigint(19) default '0', /*已上傳大小*/
`f_perSvr` varchar(7) default '0%', /*已上傳百分比*/
`f_complete` tinyint(1) default '0', /*是否已上傳完畢*/
`f_time` timestamp NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
`f_deleted` tinyint(1) default '0',
`f_scan` tinyint(1) default '0',
PRIMARY KEY (`f_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
該項目核心就是文件分塊上傳。前后端要高度配合，需要雙方約定好一些數據，才能完成大文件分塊，我們在項目中要重點解決的以下問題。
* 如何分片；
* 如何合成一個文件；
* 中斷了從哪個分片開始。
如何分，利用強大的js庫，來減輕我們的工作，市場上已經能有關於大文件分塊的輪子，雖然程序員的天性曾迫使我重新造輪子。但是因為時間的關系還有工作的關系，我只能罷休了。最后我選擇了百度的WebUploader來實現前端所需。
如何合，在合之前，我們還得先解決一個問題，我們如何區分分塊所屬那個文件的。剛開始的時候，我是采用了前端生成了唯一uuid來做文件的標志，在每個分片請求上帶上。不過后來在做秒傳的時候我放棄了，采用了Md5來維護分塊和文件關系。
在服務端合並文件，和記錄分塊的問題，在這方面其實行業已經給了很好的解決方案了。參考迅雷，你會發現，每次下載中的時候，都會有兩個文件，一個文件主體，另外一個就是文件臨時文件，臨時文件存儲着每個分塊對應字節位的狀態。
這些都是需要前后端密切聯系才能做好，前端需要根據固定大小對文件進行分片，並且請求中要帶上分片序號和大小。前端發送請求順利到達后台后，服務器只需要按照請求數據中給的分片序號和每片分塊大小（分片大小是固定且一樣的）算出開始位置，與讀取到的文件片段數據，寫入文件即可。
為了便於開發，我 將服務端的業務邏輯進行了如下划分，分成初始化，塊處理，文件上傳完畢等。
服務端的業務邏輯模塊如下
功能分析：
文件夾生成模塊
文件夾上傳完畢后由服務端進行掃描代碼如下
public class fd_scan
{
DbHelper db;
Connection con;
PreparedStatement cmd_add_f = null;
PreparedStatement cmd_add_fd = null;
public FileInf root = null;//根節點
public fd_scan()
{
this.db = new DbHelper();
this.con = this.db.GetCon();
}
public void makeCmdF()
{
StringBuilder sb = new StringBuilder();
sb.append("insert into up6_files (");
sb.append(" f_id");//1
sb.append(",f_pid");//2
sb.append(",f_pidRoot");//3
sb.append(",f_fdTask");//4
sb.append(",f_fdChild");//5
sb.append(",f_uid");//6
sb.append(",f_nameLoc");//7
sb.append(",f_nameSvr");//8
sb.append(",f_pathLoc");//9
sb.append(",f_pathSvr");//10
sb.append(",f_pathRel");//11
sb.append(",f_md5");//12
sb.append(",f_lenLoc");//13
sb.append(",f_sizeLoc");//14
sb.append(",f_lenSvr");//15
sb.append(",f_perSvr");//16
sb.append(",f_complete");//17
sb.append(") values(");
sb.append(" ?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(")");
try {
this.cmd_add_f = this.con.prepareStatement(sb.toString());
this.cmd_add_f.setString(1, "");//id
this.cmd_add_f.setString(2, "");//pid
this.cmd_add_f.setString(3, "");//pidRoot
this.cmd_add_f.setBoolean(4, true);//fdTask
this.cmd_add_f.setBoolean(5, false);//f_fdChild
this.cmd_add_f.setInt(6, 0);//f_uid
this.cmd_add_f.setString(7, "");//f_nameLoc
this.cmd_add_f.setString(8, "");//f_nameSvr
this.cmd_add_f.setString(9, "");//f_pathLoc
this.cmd_add_f.setString(10, "");//f_pathSvr
this.cmd_add_f.setString(11, "");//f_pathRel
this.cmd_add_f.setString(12, "");//f_md5
this.cmd_add_f.setLong(13, 0);//f_lenLoc
this.cmd_add_f.setString(14, "");//f_sizeLoc
this.cmd_add_f.setLong(15, 0);//f_lenSvr
this.cmd_add_f.setString(16, "");//f_perSvr
this.cmd_add_f.setBoolean(17, true);//f_complete
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void makeCmdFD()
{
StringBuilder sb = new StringBuilder();
sb.append("insert into up6_folders (");
sb.append(" f_id");//1
sb.append(",f_pid");//2
sb.append(",f_pidRoot");//3
sb.append(",f_nameLoc");//4
sb.append(",f_uid");//5
sb.append(",f_pathLoc");//6
sb.append(",f_pathSvr");//7
sb.append(",f_pathRel");//8
sb.append(",f_complete");//9
sb.append(") values(");//
sb.append(" ?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(",?");
sb.append(")");
try {
this.cmd_add_fd = this.con.prepareStatement(sb.toString());
this.cmd_add_fd.setString(1, "");//id
this.cmd_add_fd.setString(2, "");//pid
this.cmd_add_fd.setString(3, "");//pidRoot
this.cmd_add_fd.setString(4, "");//name
this.cmd_add_fd.setInt(5, 0);//f_uid
this.cmd_add_fd.setString(6, "");//pathLoc
this.cmd_add_fd.setString(7, "");//pathSvr
this.cmd_add_fd.setString(8, "");//pathRel
this.cmd_add_fd.setBoolean(9, true);//complete
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
protected void GetAllFiles(FileInf inf,String root)
{
File dir = new File(inf.pathSvr);
File [] allFile = dir.listFiles();
for(int i = 0; i < allFile.length; i++)
{
if(allFile[i].isDirectory())
{
FileInf fd = new FileInf();
String uuid = UUID.randomUUID().toString();
uuid = uuid.replace("-", "");
fd.id = uuid;
fd.pid = inf.id;
fd.pidRoot = this.root.id;
fd.nameSvr = allFile[i].getName();
fd.nameLoc = fd.nameSvr;
fd.pathSvr = allFile[i].getPath();
fd.pathSvr = fd.pathSvr.replace("\\", "/");
fd.pathRel = fd.pathSvr.substring(root.length() + 1);
fd.perSvr = "100%";
fd.complete = true;
this.save_folder(fd);
this.GetAllFiles(fd, root);
}
else
{
FileInf fl = new FileInf();
String uuid = UUID.randomUUID().toString();
uuid = uuid.replace("-", "");
fl.id = uuid;
fl.pid = inf.id;
fl.pidRoot = this.root.id;
fl.nameSvr = allFile[i].getName();
fl.nameLoc = fl.nameSvr;
fl.pathSvr = allFile[i].getPath();
fl.pathSvr = fl.pathSvr.replace("\\", "/");
fl.pathRel = fl.pathSvr.substring(root.length() + 1);
fl.lenSvr = allFile[i].length();
fl.lenLoc = fl.lenSvr;
fl.perSvr = "100%";
fl.complete = true;
this.save_file(fl);
}
}
}
protected void save_file(FileInf f)
{
try {
this.cmd_add_f.setString(1, f.id);//id
this.cmd_add_f.setString(2, f.pid);//pid
this.cmd_add_f.setString(3, f.pidRoot);//pidRoot
this.cmd_add_f.setBoolean(4, f.fdTask);//fdTask
this.cmd_add_f.setBoolean(5, true);//f_fdChild
this.cmd_add_f.setInt(6, f.uid);//f_uid
this.cmd_add_f.setString(7, f.nameLoc);//f_nameLoc
this.cmd_add_f.setString(8, f.nameSvr);//f_nameSvr
this.cmd_add_f.setString(9, f.pathLoc);//f_pathLoc
this.cmd_add_f.setString(10, f.pathSvr);//f_pathSvr
this.cmd_add_f.setString(11, f.pathRel);//f_pathRel
this.cmd_add_f.setString(12, f.md5);//f_md5
this.cmd_add_f.setLong(13, f.lenLoc);//f_lenLoc
this.cmd_add_f.setString(14, f.sizeLoc);//f_sizeLoc
this.cmd_add_f.setLong(15, f.lenSvr);//f_lenSvr
this.cmd_add_f.setString(16, f.perSvr);//f_perSvr
this.cmd_add_f.setBoolean(17, f.complete);//f_complete
this.cmd_add_f.executeUpdate();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}//
}
protected void save_folder(FileInf f)
{
try {
this.cmd_add_fd.setString(1, f.id);//id
this.cmd_add_fd.setString(2, f.pid);//pid
this.cmd_add_fd.setString(3, f.pidRoot);//pidRoot
this.cmd_add_fd.setString(4, f.nameSvr);//name
this.cmd_add_fd.setInt(5, f.uid);//f_uid
this.cmd_add_fd.setString(6, f.pathLoc);//pathLoc
this.cmd_add_fd.setString(7, f.pathSvr);//pathSvr
this.cmd_add_fd.setString(8, f.pathRel);//pathRel
this.cmd_add_fd.setBoolean(9, f.complete);//complete
this.cmd_add_fd.executeUpdate();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void scan(FileInf inf, String root) throws IOException, SQLException
{
this.makeCmdF();
this.makeCmdFD();
this.GetAllFiles(inf, root);
this.cmd_add_f.close();
this.cmd_add_fd.close();
this.con.close();
}
}
分塊上傳，分塊處理邏輯應該是最簡單的邏輯了，up6已經將文件進行了分塊，並且對每個分塊數據進行了標識，這些標識包括文件塊的索引，大小，偏移，文件MD5，文件塊MD5（需要開啟）等信息，服務端在接收這些信息后便可以非常方便的進行處理了。比如將塊數據保存到分布式存儲系統中
分塊上傳可以說是我們整個項目的基礎，像斷點續傳、暫停這些都是需要用到分塊。
分塊這塊相對來說比較簡單。前端是采用了webuploader，分塊等基礎功能已經封裝起來，使用方便。
借助webUpload提供給我們的文件API,前端就顯得異常簡單。
前台HTML模板
this.GetHtmlFiles = function()
{
var acx = "";
acx += '<div class="file-item" id="tmpFile" name="fileItem">\
<div class="img-box"><img name="file" src="js/file.png"/></div>\
<div class="area-l">\
<div class="file-head">\
<div name="fileName" class="name">HttpUploader程序開發.pdf</div>\
<div name="percent" class="percent">(35%)</div>\
<div name="fileSize" class="size" child="1">1000.23MB</div>\
</div>\
<div class="process-border"><div name="process" class="process"></div></div>\
<div name="msg" class="msg top-space">15.3MB 20KB/S 10:02:00</div>\
</div>\
<div class="area-r">\
<span class="btn-box" name="cancel" title="取消"><img name="stop" src="js/stop.png"/><div>取消</div></span>\
<span class="btn-box hide" name="post" title="繼續"><img name="post" src="js/post.png"/><div>繼續</div></span>\
<span class="btn-box hide" name="stop" title="停止"><img name="stop" src="js/stop.png"/><div>停止</div></span>\
<span class="btn-box hide" name="del" title="刪除"><img name="del" src="js/del.png"/><div>刪除</div></span>\
</div>';
acx += '</div>';
acx += '<div class="file-item" name="folderItem">\
<div class="img-box"><img name="folder" src="js/folder.png"/></div>\
<div class="area-l">\
<div class="file-head">\
<div name="fileName" class="name">HttpUploader程序開發.pdf</div>\
<div name="percent" class="percent">(35%)</div>\
<div name="fileSize" class="size" child="1">1000.23MB</div>\
</div>\
<div class="process-border top-space"><div name="process" class="process"></div></div>\
<div name="msg" class="msg top-space">15.3MB 20KB/S 10:02:00</div>\
</div>\
<div class="area-r">\
<span class="btn-box" name="cancel" title="取消"><img name="stop" src="js/stop.png"/><div>取消</div></span>\
<span class="btn-box hide" name="post" title="繼續"><img name="post" src="js/post.png"/><div>繼續</div></span>\
<span class="btn-box hide" name="stop" title="停止"><img name="stop" src="js/stop.png"/><div>停止</div></span>\
<span class="btn-box hide" name="del" title="刪除"><img name="del" src="js/del.png"/><div>刪除</div></span>\
</div>';
acx += '</div>';
acx += '<div class="files-panel" name="post_panel">\
<div name="post_head" class="toolbar">\
<span class="btn" name="btnAddFiles">選擇多個文件</span>\
<span class="btn" name="btnAddFolder">選擇文件夾</span>\
<span class="btn" name="btnPasteFile">粘貼文件和目錄</span>\
<span class="btn" name="btnSetup">安裝控件</span>\
</div>\
<div class="content" name="post_content">\
<div name="post_body" class="file-post-view"></div>\
</div>\
<div class="footer" name="post_footer">\
<span class="btn-footer" name="btnClear">清除已完成文件</span>\
</div>\
</div>';
return acx;
};
分則必合。把大文件分片了，但是分片了就沒有原本文件功能，所以我們要把分片合成為原本的文件。我們只需要把分片按原本位置寫入到文件中去。因為前面原理那一部我們已經講到了，我們知道分塊大小和分塊序號，我就可以知道該分塊在文件中的起始位置。所以這里使用RandomAccessFile是明智的，RandomAccessFile能在文件里面前后移動。但是在andomAccessFile的絕大多數功能，已經被JDK1.4的NIO的“內存映射文件(memory-mapped files)”取代了。我在該項目中分別寫了使用RandomAccessFile與MappedByteBuffer來合成文件。分別對應的方法是uploadFileRandomAccessFile和uploadFileByMappedByteBuffer。兩個方法代碼如下。
秒傳功能
服務端邏輯
秒傳功能，相信大家都體現過了，網盤上傳的時候，發現上傳的文件秒傳了。其實原理稍微有研究過的同學應該知道，其實就是檢驗文件MD5，記錄下上傳到系統的文件的MD5,在一個文件上傳前先獲取文件內容MD5值或者部分取值MD5，然后在匹配系統上的數據。
Breakpoint-http實現秒傳原理，客戶端選擇文件之后，點擊上傳的時候觸發獲取文件MD5值，獲取MD5后調用系統一個接口（/index/checkFileMd5），查詢該MD5是否已經存在（我在該項目中用redis來存儲數據，用文件MD5值來作key，value是文件存儲的地址。）接口返回檢查狀態，然后再進行下一步的操作。相信大家看代碼就能明白了。
嗯，前端的MD5取值也是用了webuploader自帶的功能，這還是個不錯的工具。
控件計算完文件MD5后會觸發md5_complete事件，並傳值md5，開發者只需要處理這個事件即可，
斷點續傳
up6已經自動對斷點續傳進行了處理，不需要開發都再進行單獨的處理。
在f_post.jsp中接收這些參數，並進行處理，開發者只需要關注業務邏輯，不需要關注其它的方面。
斷點續傳，就是在文件上傳的過程中發生了中斷，人為因素（暫停）或者不可抗力（斷網或者網絡差）導致了文件上傳到一半失敗了。然后在環境恢復的時候，重新上傳該文件，而不至於是從新開始上傳的。
前面也已經講過，斷點續傳的功能是基於分塊上傳來實現的，把一個大文件分成很多個小塊，服務端能夠把每個上傳成功的分塊都落地下來，客戶端在上傳文件開始時調用接口快速驗證，條件選擇跳過某個分塊。
實現原理，就是在每個文件上傳前，就獲取到文件MD5取值，在上傳文件前調用接口（/index/checkFileMd5，沒錯也是秒傳的檢驗接口）如果獲取的文件狀態是未完成，則返回所有的還沒上傳的分塊的編號，然后前端進行條件篩算出哪些沒上傳的分塊，然后進行上傳。
當接收到文件塊后就可以直接寫入到服務器的文件中
這是文件夾上傳完后的效果
這是文件夾上傳完后在服務端的存儲結構
歡迎入群一起討論“374992201”