左昌麒 何麗 王鐵山

摘要：隨著計(jì)算機(jī)技術(shù)的不斷發(fā)展，網(wǎng)絡(luò)資源文件的管理越來越被人們所重視。人們對(duì)大容量文件傳輸?shù)谋憬菪?、安全性和可靠性的要求也越來越高。該文以目前流行的前端框架Bootstrap為基礎(chǔ)，結(jié)合HTML5、jQuery技術(shù)、PHP等技術(shù)，設(shè)計(jì)了一個(gè)基于Web的大容量附件上傳管理系統(tǒng)，實(shí)現(xiàn)了前端附件上傳、后臺(tái)附件復(fù)制、刪除、分類管理等功能。詳細(xì)介紹了斷點(diǎn)續(xù)傳、自動(dòng)重傳等實(shí)現(xiàn)技術(shù)，經(jīng)測試證明，該系統(tǒng)能較好滿足大容量附件上傳需求。

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

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）01-0083-03

1概述

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

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

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

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

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

2.1前端文件上傳插件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2文件上傳的FormData封裝格式

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

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

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

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

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

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

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

4總結(jié)

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