WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮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規范組織代碼，清晰明了，方便高級玩家擴展。
用法html：
<div id="uploader" class="wu-example" style="text-align: center;margin-top: 20px;">
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">點擊這里<br />
選擇您要上傳的視頻
</div>
</div>
</div>
js:
var uploader = WebUploader.create({
// auto : true, //設置為 true 后，不需要手動調用上傳，有文件選擇即開始上傳。
// swf文件路徑
swf: '../js/Uploader.swf',
// 文件接收服務端。
server: 'url',
// 內部根據當前運行是創建，可能是input元素，也可能是flash.
pick: {
id : '#picker',
multiple : false
},
chunkRetry : false,
fileNumLimit : 1,//允許上傳文件數量
fileSizeLimit: 100 * 1024 * 1024, //驗證文件總大小是否超出限制, 超出則不允許加入隊列。
fileSingleSizeLimit : 100 * 1024 * 1024, //驗證單個文件大小是否超出限制, 超出則不允許加入隊
// 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！
resize: false,
// 只允許選擇視頻或者圖片文件文件.
accept:{
title: 'Videos',//Images
mimeTypes: 'video/*' // images/*
}
});
//這里添加主要參數
$('#ctlBtn').click(function(){
uploader.options.formData.random = random;
uploader.options.formData.price = amount;
uploader.retry();
});
//這里處理一些插件的API，看需要使用
// 當有文件被添加進隊列的時候 由於webuploader不處理UI邏輯，所以需要去監聽fileQueued事件來實現。
uploader.on( 'fileQueued', function( file ) {
$list = $('#thelist');
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail" style="margin:20px 0" > ' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'<div class="state" style="color:red;">'+sizeBig(file.size)+'</div>' +
'<p class="state" style="color:red;">等待上傳</p>' +
'</div>'
),
$img = $li.find('img');
// $list為容器jQuery實例
$list.append( $li );
// 創建縮略圖
// 如果為非圖片文件，可以不用調用此方法。
// thumbnailWidth x thumbnailHeight 為 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>視頻文件</span>');
return;
}
$img.attr( 'src', src );
}, 100, 100 );
});
//文件上傳進度 文件上傳中，Web Uploader會對外派送uploadProgress事件，其中包含文件對象和該文件當前上傳進度。
// 文件上傳過程中創建進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.barContainer .bar');
// 避免重復創建
if ( !$percent.length ) {
$percent = $('<div class="barContainer"><div class="bar" style="width: 100%"></div></div>').appendTo($li).find('.bar');
}
$li.find('p.state').text('上傳中');
$percent.html((percentage * 100).toFixed(2) + '%');
myc.showProgress({
title : '上傳中',
text : (percentage * 100).toFixed(2) + '%'
});
if(percentage*100 == 100){ }
});
// 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
uploader.on( 'uploadSuccess', function( file , response ) {
$( '#'+file.id ).find('p.state').text('已上傳');
if(response.success){
var timeAjax = 60;
repeat(timeAjax,response.key);
}else{
myc.toast({
msg : '上傳出錯,請重新上傳'
});
}
});
// 文件上傳失敗，顯示上傳出錯。
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').text('上傳出錯,請重新上傳');
myc.toast({
msg:'上傳出錯,請重新上傳'
});
});
// 完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on( 'uploadComplete', function( file ) {
uploader.on( 'error', function( file ) {
if(file == 'Q_EXCEED_SIZE_LIMIT'){
myc.toast({
msg:'不能上傳超過100M的視頻'
});
return false;
}
if(typeof(file) == 'object'){
myc.toast({
msg : JSON.stringify(file)
});
}else{
myc.toast({
msg : file
});
}
});
// 只能上傳一個視頻文件
uploader.on('error', function(file) {
if(file=="Q_EXCEED_NUM_LIMIT"){
myc.alert({
msg:'您已經設置過上傳的文件'
});
return false;
}else if(file=="Q_TYPE_DENIED"){
myc.alert({
msg:'不支持這個視頻格式'
});
return false;
}
});
總結：有一些代碼是個人封裝的插件，換湯不換葯，可以仔細去看看官網的AIP 鏈接： http://fex.baidu.com/webuploader/doc/index.html