文件上傳實例


  公司產品中一直是采用 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.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM