作者: IT小兵 | 2015年7月30日| 熱度:2971℃ | 評論:0 |參與:0
介紹了功能強大的上傳控件[uploadify.js] plupload]之後，好多同學都問我要demo。其實上傳控件很多。尤其最近使用了百度出品強大的Html5上傳控件WebUploader。更是覺得有這個就足夠了。
1、什麼是WebUploader？所謂的百度出品 必屬精品。參考echarts就知道了。
WebUploader 是由 Baidu FEX 團隊開發的一款以 HTML5 爲主，FLASH 爲輔的現代文件上傳組件。在現代的瀏覽器裏面能充分發揮 HTML5 的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的 FLASH 運行時，兼容 IE6+，iOS 6+, android 4+。採用大文件分片併發上傳，極大的提高了文件上傳效率。
2、強大在那裏？
分片、併發
分片與併發結合，將一個大文件分割成多塊，併發上傳，極大地提高大文件的上傳速度。
當網絡問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網絡數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊複製），Ctrl + V便可添加此圖片文件。
HTML5 & FLASH
兼容主流瀏覽器，接口一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規範組織代碼，清晰明瞭，方便高級玩家擴展。
支持手機端，支持剪貼板的圖片。
3、demo預覽
http://fex-team.github.io/webuploader/demo.html