公司產品中一直是采用 flash 實現文件上傳功能,但用戶的需求多了以后遇到了越來越多難以解決的問題,最后試着用碩正提供的freeform、小型頁面控件來解決。
碩正文件上傳的實現途徑有3、4種,由於公司產品發布的需要,就選擇了其中的 httpPost 方案,其它的象 ftp、Http put盡管也是不錯的選擇,但需要另外建站,或涉及權限問題,恐怕最終用戶的部署維護會吃不消。
httpPost方案還有一個非常好的優點,就是文件上傳后是保存到文件還是保存到數據庫,都很容易實現。
我們的需求以及最終實現了的功能特點在此先羅列一下:
1. 支持多文件上傳;
2. 支持超過4G的大文件上傳;
3. 使用碩正的Zip選項,壓縮上傳,以減輕帶寬壓力;
4. 支持斷點續傳,記憶對上次失敗的發包位置;
5. 支持異步上傳,免得在上傳大文件時瀏覽器卡死;
6. 有進度條的圖示,我們沒有采用碩正自帶的進度條,而是用js自己寫了一個,里面的信息更多,界面更友好;
7. 可以隨時取消上傳;
結合碩正文檔,我們完成了開發,最終的界面如下:
開始上傳:
上傳中:
上傳結束:
怎么樣, 功能很完備吧?碩正控件是 2px X 2px 躲在左上角,平時看不到。
如下是源碼中的關鍵部分:
客戶端js: Upload_Client.js
后端C#: Upload_Server.aspx.cs
有幾點須說明:
1. 必須采用分包,設定包的尺寸(PartSize),包的大小要適中,太大的話進度條步進太慢,太小的話碩正發起的Request太多會影響效率;
2. 由於是異步上傳,必須充分利用碩正 OnEvent 事件,進度條上的信息就是來自事件參數的;
如下按工作步驟逐段分析一下這個客戶端的js:
步驟一.打開碩正套件提供的對話框,選擇文件
步驟二.上傳
步驟三.發起上傳
步驟四.偵聽上傳事件
說明一下:源碼中的“Download”的部分,是和上傳無關的。其實我們同時也實現了文件下載的功能,用的是碩正全局函數中的“Download”函數,由於下載比較簡單,我們在此就不作分析了。
最后,任務圓滿完成。和以前的flash上傳相比,雙方各有優劣,以下列出一些對比:
Supcan的優勢
1.1 使用簡單,后台基本只需要負責接收數據即可, Flash的 http Body中同時安插了上傳參數和文件的二進制流,二者夾雜在一起導致后端解析異常復雜,一旦涉及大數據必須實現接口HttpModule以繞過IIS對文件大小的限制(默認4M),換之以底層抽取Http中的數據,實現難度大,數據接收失敗率高,而且后期維護較繁瑣。而碩正的http body中就是純數據,根本不需要解析它,所有的控制參數都安置在URL中,后端解析非常清晰:
這些參數中還有數據包的MD5參數,后端能輕易驗證數據包的正確性;
1.2 Flash對超大數據支持不足,而Supcan則提供了超過4G的超大數據上傳支持;
1.3 Flash不支持通過傳入文件路徑進行文件上傳方式,而Supcan能很好支持通過路徑進行文件上傳;
1.4 Flash不支持斷點續傳,Supcan本身就是通過數據包方式傳輸到后台,原生支持斷點續傳,只要在后端保存已上傳的塊數,即可支持斷點續傳;
1.5 Supcan支持客戶端壓縮,節省帶寬。
Flash的優勢
2.1 瀏覽器支持多,能很好兼容大部分瀏覽器,Supcan支持主流瀏覽器,但在firefox效果不佳,在打開文件選擇對話框時會導致控件崩潰情況,碩正的答復是與Firefox的消息處理有底層沖突,無法解決;
2.2 Flash事件更豐富,提供很多事件接口給開發者調用;
2.3 Flash文件上傳隊列做的比較好,能自動逐個上傳文件,而Supcan需要在js中循環調用;
2.4 Flash上傳界面支持自定義,允許創建豐富的UI.