大附件上傳管理系統的設計與實現

左昌麒 何麗 王鐵山

摘要：隨著計算機技術的不斷發展，網絡資源文件的管理越來越被人們所重視。人們對大容量文件傳輸的便捷性、安全性和可靠性的要求也越來越高。該文以目前流行的前端框架Bootstrap為基礎，結合HTML5、jQuery技術、PHP等技術，設計了一個基于Web的大容量附件上傳管理系統，實現了前端附件上傳、后臺附件復制、刪除、分類管理等功能。詳細介紹了斷點續傳、自動重傳等實現技術，經測試證明，該系統能較好滿足大容量附件上傳需求。

關鍵詞：文件上傳;Bootstrap;jQuery;斷點續傳

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2020）01-0083-03

1概述

當代計算機技術發展迅速，網絡資源文件的管理越來越被人們所重視。為此各種方便管理用戶文件的網盤技術日益興起。以百度網盤為例，百度網盤有桌面版和移動版，技術非常成熟，也都提供了斷點續傳功能，但是因為基于TCP/IP協議在傳輸大文件的時候需要一個建立連接的過程，對用戶帶寬需求較高。另一方面下載功能限速，如果用戶沒有開通百度網盤的會員服務，下載文件的網絡傳輸會限制在一個線程以內，最大傳輸速度約為128Kbyte每秒，非常影響用戶體驗。

為此，本文借鑒百度網盤的設計思想，實現一個局域網版的網盤（大附件管理系統）供教師用來管理各類大容量文件，包括上傳各類教學視頻、學生上交的大作業等，學生可通過此系統上傳需要提交的大作業文件。該系統可提供桌面和移動端兩種訪問方式，從而為教師管理各類大文件提供網盤服務。

2系統總體設計

該系統采用Bs架構進行系統設計。前端采用目前流行的基于jQuery前端框架Bootstrap，同時采用響應式頁面設計，交互簡單方便;后臺使用PHP和MySQL數據庫對文件數據進行管理。整個系統分為Web客戶端與Web服務器，前后臺之間通過JsON進行數據通信。

系統的總體功能結構如圖所示。

2.1前端文件上傳插件

該模塊的設計實現相對簡單。其功能依賴于服務端文件管理模塊來實現斷點續傳功能，包括鏈接到服務端文件管理頁面的用戶登錄及驗證頁面。

2.2服務端文件管理

文件管理模塊是該系統的核心，由文件表格、文件樹和文件編輯模塊三個插件構成。主要功能可以分為：

1）基于Web的文件資源瀏覽。

2）基于Web的文件在線打開和編輯。

3）基于HTYP協議的大文件傳輸。

4）大文件傳輸的斷點續傳功能。

5）文件和文件夾的基本操作，如下載，刪除，復制和移動等。

6）用戶文件的空間管理。

2.3數據庫及文件服務器

本系統使用MySQL數據庫，用來保存用戶信息、上傳的文件基本信息。文件斷點續傳模塊采用base54加密的存儲技術來實現對文件信息的管理。

3關鍵技術實現

3.1斷點續傳實現基本思路

斷點續傳功能是文件安全上傳的重要保障，要實現斷點續傳，一般傳統的方法是使用前端頁面Form表單的input標簽選中文件，或者使用HTML5 File API新引入的FormData對象上傳文件，將文件作為一個整體提交，服務器將文件重命名然后保存在臨時目錄，如果一段時間不繼續操作那么服務器就會刪除該文件。而且HTYP協議是一個無狀態的協議，用戶無法與服務器保持長連接狀態，所以在實際開發過程中不能使用Buffer的形式來提交文件對象。

本系統采用的方法如下：

1）對獲取到的文件對象進行分割切片，一小塊一小塊的傳輸到服務器。在后臺PHP端采用APPEND的方式將文件合并成一個整體。

2）上傳文件前先執行初始化操作，即先向服務器查詢已上傳的文件大小來確定本輪分割的起點字節位置。

3）每次上傳完成后應該更新已經上傳文件的大小記錄，向數據庫修改文件信息。

4）最后需要Tag客戶端與服務器的文件，將各個文件塊一一對應，防止將A文件的部分內容寫入B文件。

3.2文件上傳的FormData封裝格式

上傳文件的過程可以概括為點擊選擇文件按鈕觸發文件框打開事件，執行文件上傳初始化操作，即向服務器查詢斷點信息，然后向服務器發送FormData封裝好的文件塊。

將二進制文件對象封裝成表單數據使用FormData類，利用jQuery的Ajax上傳到服務端處理程序upload.php，將pmcessDa-ta和contentType屬性設置為false，在上傳完成的SUCCSSS回調函數執行更新進度條信息等操作。

3.3斷點續傳的具體實現

由于HTYP的無狀態特性，在文件切片上傳的同時要注意最大的傳輸單位是2Mbyte，本系統將文件塊的大小規定為1Mbyte·，具體實現的Js代碼如下：

而在后臺服務器端用PHP來接收上傳的文件塊，實現方案如下：

先定義一個初始化函數用來向服務器查詢已經上傳的文件大小，以確定本次應該分割的字節位置：

相應的，在服務器端也需要做初始化查詢的腳本來配合前端完成功能：

4總結

為滿足在校學生便捷的上交大容量作業，教師方便管理各類教學視頻、學生上交的大作業等需求，本文研究并實現了一個基于web的大附件上傳管理系統。基本滿足目前工作需要。但該系統的文件管理采用了實體文件目錄樹形結構，因此在文件共享、大量文件移動等方面略顯不足。在下一版本改進中，將考慮使用完全二叉樹的形式保存目錄結構，在查找算法上結合并查集進行快速遞歸，從而提高系統的性能。