左昌麒 何麗 王鐵山

摘要：隨著計算機技術(shù)的不斷發(fā)展，網(wǎng)絡(luò)資源文件的管理越來越被人們所重視。人們對大容量文件傳輸?shù)谋憬菪浴踩院涂煽啃缘囊笠苍絹碓礁摺Ｔ撐囊阅壳傲餍械那岸丝蚣蹷ootstrap為基礎(chǔ)，結(jié)合HTML5、jQuery技術(shù)、PHP等技術(shù)，設(shè)計了一個基于Web的大容量附件上傳管理系統(tǒng)，實現(xiàn)了前端附件上傳、后臺附件復(fù)制、刪除、分類管理等功能。詳細介紹了斷點續(xù)傳、自動重傳等實現(xiàn)技術(shù)，經(jīng)測試證明，該系統(tǒng)能較好滿足大容量附件上傳需求。

關(guān)鍵詞：文件上傳;Bootstrap;jQuery;斷點續(xù)傳

中圖分類號：TP311 文獻標(biāo)識碼：A

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

1概述

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

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

2系統(tǒng)總體設(shè)計

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

系統(tǒng)的總體功能結(jié)構(gòu)如圖所示。

2.1前端文件上傳插件

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

2.2服務(wù)端文件管理

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

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

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

3）基于HTYP協(xié)議的大文件傳輸。

4）大文件傳輸?shù)臄帱c續(xù)傳功能。

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

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

2.3數(shù)據(jù)庫及文件服務(wù)器

本系統(tǒng)使用MySQL數(shù)據(jù)庫，用來保存用戶信息、上傳的文件基本信息。文件斷點續(xù)傳模塊采用base54加密的存儲技術(shù)來實現(xiàn)對文件信息的管理。

3關(guān)鍵技術(shù)實現(xiàn)

3.1斷點續(xù)傳實現(xiàn)基本思路

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

本系統(tǒng)采用的方法如下：

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

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

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

4）最后需要Tag客戶端與服務(wù)器的文件，將各個文件塊一一對應(yīng)，防止將A文件的部分內(nèi)容寫入B文件。

3.2文件上傳的FormData封裝格式

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

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

3.3斷點續(xù)傳的具體實現(xiàn)

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

而在后臺服務(wù)器端用PHP來接收上傳的文件塊，實現(xiàn)方案如下：

先定義一個初始化函數(shù)用來向服務(wù)器查詢已經(jīng)上傳的文件大小，以確定本次應(yīng)該分割的字節(jié)位置：

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

4總結(jié)

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