webuploader檔案上傳元件在現代的瀏覽器裡面能充分發揮html5的優勢，同時又不摒棄主流ie瀏覽器，沿用原來的flash執行時，相容ie6+，ios 6+, android 4+。兩套執行時，同樣的呼叫方式，可供使用者任意選用。 採用大檔案分片併發上傳，極大的提高了檔案上傳效率。
一、功能介紹
分片、併發
分片與併發結合，將乙個大檔案分割成多塊，併發上傳，極大地提高大檔案的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個檔案。另外分片傳輸能夠更加實時的跟蹤上傳進度。
預覽、壓縮
支援常用格式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規範組織**，清晰明了，方便高階玩家擴充套件。
引入資源
使用web uploader檔案上傳需要引入三種資源：js, css, swf。
二、檔案上傳
webuploader只包含檔案上傳的底層實現，不包括ui部分。所以互動方面可以自由發揮，以下將演示如何去實現乙個簡單的版本。
html部分
首先準備dom結構，包含存放檔案資訊的容器、選擇按鈕和上傳按鈕三個部分。
程式設計客棧"uploader" class="wu-example">
選擇檔案
初始化web uploader
具體說明，請看一下**中的注釋部分。
var uploader = webuploader.create();
顯示使用者選擇
由於webuploader不處理ui邏輯，所以需要去監聽filequeued事件來實現。
// 當有檔案被新增進佇列的時候
uploader.on( 'filequeued', function( file ) );
檔案上傳進度
檔案上傳中，web uploader會對外派送uploadprogress事件，其中包含檔案物件和該檔案當前上傳進度。
// 檔案上傳過程中建立進度條實時顯示。
uploader.on( 'uploadprogress', function( file, percentage )
$li.find('p.state').text('上傳中');
$percent.css( 'width', percentage * 100 + '%' );
});檔案成功、失敗處理
檔案上傳失敗會派送uploaderror事件，成功則派送uploadsuccess事件。不管成功或者失敗，在檔案上傳完後都會觸發uploadcomplete事件。
uploader.on( 'uploadsuccess', function( file ) );
uploader.on( 'uploaderror', function( file ) );
uploader.on( 'uploadcomplete', function( file ) );
三、上傳
與普通檔案上傳相比，此demo演示了：檔案過濾，預覽，壓縮上傳等功能。
html
要實現如上demo，首先需要準備乙個按鈕，和乙個用來存放新增的檔案資訊列表的容器。
選擇
j**ascript
建立web uploader例項
// 初始化web uploader
var uploader = webuploader.create(
});監聽filequeued事件，通過uploader.makethumb來建立預覽圖。
ps: 這裡得到的是data url資料，ie6、ie7不支援直接預覽。可以借助flash或者服務端來完成預覽。
// 當有檔案新增進來的時候
uploader.on( 'filequeued', function( file )
$img.attr( 'src', src );
}, thumbnailwidth, thumbnailheight );
});然後剩下的就是上傳狀態提示了，當檔案上傳過程中, 上傳成功，上傳失敗，上傳完成都分別對應uploadprogress,uploadsuccess, uploaderror, uploadcomplete事件。
// 檔案上傳過程中建立進度條實時顯示。
uploader.on( 'uploadprogress', function( file, percentage )
$percent.css( 'width', percentage * 100 + '%' );
});// 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。
uploader.on( 'uploadsuccess', function( file ) );
// 檔案上傳失敗，顯示上傳出錯。
uploader.on( 'uploaderror', function( file )
$error.text('上傳失敗');
});// 完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on( 'uploadcomplete', function( file ) );
WebUploader上傳檔案
引入資源檔案 個，css檔案和js檔案。function inituploader 檔案接收服務端 pick btnpicker 選擇檔案的按鈕,內部根據當前執行是建立，可能是input元素，也可能是flash.dnd page body 指定drag and drop拖拽的容器 compress ...
webuploader上傳檔案
var var btn ctlbtn 開始上傳 var thumbnailwidth 100 縮圖高度和寬度 單位是畫素 當寬高度是0 1的時候，是按照百分比計算，具體可以看api文件 var thumbnailheight 100 var uploader webuploader.create 當...
Web Uploader上傳檔案
2 使用web uploader檔案上傳需要引入三種資源 js,css,swf。src值根據檔案在專案中的位置而定 3 html部分 選擇檔案 開始上傳 關閉 檔案上傳示例 4 js部分 上傳初始化 function initupload chunked true,開起分片上傳。threads 1,...