1、WebUploader特點
官網地址：http://fex.baidu.com/webuploader/
1.1 分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網絡問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
1.2 預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網絡數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮后上傳保留圖片的所有原始meta數據。
1.3 多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
1.4 HTML5 & FLASH
兼容主流瀏覽器，接口一致，實現了兩套運行時支持，用戶無需關心內部用了什么內核。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
1.5 MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
1.6 易擴展、可拆分
采用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
采用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
2、引入資源
2.1 下載包內容
├── Uploader.swf // SWF文件，當使用Flash運行時需要引入。 ├── webuploader.js // 完全版本。 ├── webuploader.min.js // min版本 ├── webuploader.flashonly.js // 只有Flash實現的版本。 ├── webuploader.flashonly.min.js // min版本 ├── webuploader.html5only.js // 只有Html5實現的版本。 ├── webuploader.html5only.min.js // min版本 ├── webuploader.withoutimage.js // 去除圖片處理的版本，包括HTML5和FLASH. └── webuploader.withoutimage.min.js // min版本
2.2 或者直接使用由staticfile提供的cdn版本，或者下載Git項目包。
// SWF文件，當使用Flash運行時需要引入。 ├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf // 完全版本。 ├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js ├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js // 只有Flash實現的版本。 ├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js ├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js // 只有Html5實現的版本。 ├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js ├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js // 去除圖片處理的版本，包括HTML5和FLASH. ├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js └── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js
2.3 DIY打包
WebUploader文件打包借助了Grunt工具來實現
2.3.1 環境依賴
1.git命令行工具 2.node & npm命令行工具 3.grunt (npm install grunt-cli -g)
2.3.2 編譯代碼
1.克隆 webuploader git倉庫，git clone https://github.com/fex-team/webuploader.git。 2.安裝node依賴，npm install。 3.執行grunt dist，此動作會在dist目錄下面創建合並版本的js, 包括通過uglify壓縮的min版本。
2.3.3 配置
打開webuploader倉庫根目錄下面的Gruntfile.js文件, 代碼合並有buildtask來完成。找到build配置項。
Gruntfile.js已經配置了一個自定義合並的demo. 打包只支持HTML5的版本
// 自己配置的實例 // glob語法。 custom: { preset: "custom", cwd: "src", src: [ 'widgets/**/*.js', 'runtime/html5/**/*.js' ], dest: "dist/webuploader.custom.js" }
3、angular指令——<web-uploader>
3.1 指令功能
添加一個上傳文件按鈕，可以自行配置上傳文件的類型和過濾規則，且在彈出的模態框中進行操作，支持連續上傳，分類選擇上傳
3.2 使用說明
這里只是使用說明，可能會加一些注意事項，具體參數或者變量說明請參看后面
3.2.1 頁面添加一個指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>
3.2.2 配置上傳類型和過濾規則
上傳類型
type有四種類型，分別為
- image：圖片
- video：音視頻
- flash：flash
- file：辦公文檔，壓縮文件等等
過濾規則
accept有四個對象屬性，屬性中包含標題、允許文件后綴、允許的mimetype
3.2.3 指令中綁定彈出模態框的事件
web-uploader這個指令中其實只做了一件事，給元素本身綁定彈出模態框的事件，具體上傳文件是在模態框中完成的
3.2.4 初始化uploader類，配置相關屬性
在模態框控制器中用到了$timeout
$timeout(function(){ //這里是上傳配置代碼 },0)
因為配置uploader時需要事先准備好dom元素，angular打開模態框是異步而JavaScript是單線程，所以實際上在執行模態框控制器中的代碼時，模態框並沒有打開，也就是dom並沒有加載完成，這會導致WebUploader報a.runningtime is not a function...的錯誤
3.3 指令詳細說明
3.3.1 父級controller中的配置
.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允許上傳的類型 圖片/音視頻/flash/文件
$scope.accept = {
//圖片
image: {
title : 'Images',//標題
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允許上傳文件的后綴
mimeTypes : 'image/*'//允許的mimetype
},
//音視頻
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//辦公文檔，壓縮文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};
}])
3.3.2 指令web-uploader
.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){
$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
| 參數 | 類型 | 說明 |
| accept | object | 允許的文件類型，此對象是父級controller傳到指令中的 |
| type | string | 四種，分別為 image/video/flash/file 分別代表 圖片/音視頻/flash/辦公文檔，壓縮文件等等 |
3.3.3 上傳文件模態框
<div> <div class="modal-header"> <span><strong>文件上傳</strong></span> <button type="button" class="close" aria-label="Close" ng-click="cancel()"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div id="uploader" class="wu-example"> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker" class="webuploader-container"> <div class="webuploader-pick">點擊選擇圖片</div> <div id="rt_rt_19kk0j9rh1onsdor17c73va1u01" style="position: absolute; top: 0px; left: 448px; width: 168px; height: 44px; overflow: hidden; bottom: auto; right: auto;"> <input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;"></label> </div> </div> <p>或將文件拖到這里，單次最多可選30個</p> </div> <ul class="filelist"></ul> </div> <div class="statusBar" style="display: none;"> <div class="progress" style="display: none;"> <span class="text">0%</span> <span class="percentage" style="width: 0%;"></span> </div> <div class="info">共0張（0B），已上傳0張</div> <br> <div class="btns"> <div id="filePicker2" class="webuploader-container"> <div class="webuploader-pick">繼續添加</div> <div id="rt_rt_19kk0j9s01k61gq0cks1fsivlv6" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;"> <input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;"></label> </div> </div> <div class="uploadBtn state-pedding">開始上傳</div> <div class="modalCancel" ng-click="cancel()"> <span>取消</span> </div> </div> </div> </div> </div> </div>
3.3.4 模態框控制器
selectType這個對象與指令中的屬性type=""是對應的
例：type="image"時，模態框中的文字
type="video"時，模態框中的文字
在模態框控制器中用到了$timeout
$timeout(function(){ //這里是上傳配置代碼 },0)
因為配置uploader時需要事先准備好dom元素，angular打開模態框是異步而JavaScript是單線程，所以實際上在執行模態框控制器中的代碼時，模態框並沒有打開，也就是dom並沒有加載完成，這會導致WebUploader報a.runningtime is not a function...的錯誤
請看附件中101行，創建uploader實例的代碼
當然配置還有很多，請參看webuploader API ： http://fex.baidu.com/webuploader/doc/index.html
這里主要操作的是pick.innerHTML和accept
// 實例化 var uploader = WebUploader.create({ //指定選擇文件的按鈕容器 //multiple是否開啟多文件上傳，默認為true pick : { id : '#filePicker', //label : '點擊選擇圖片' innerHTML: '點擊選擇' + $scope.selectType[items.type], multiple: true }, //指定拖拽的容器 dnd : '#uploader .queueList', //啟用通過截屏來粘貼圖片 paste : document.body, //指定接受哪些類型的文件 accept : items.accept[items.type], // swf文件路徑 swf : 'Uploader.swf', disableGlobalDnd : true, //是否分片 chunked : true, //chunkSize: 700000, //每個分片的大小，默認為5M // server: 'http://webuploader.duapp.com/server/fileupload.php', server : '../demo', //文件最大數量 fileNumLimit : 30, //驗證文件總大小是否超出限制 fileSizeLimit : 5 * 1024 * 1024, // 200 M //驗證單個文件大小是否超出限制 fileSingleSizeLimit : 1 * 1024 * 1024 // 50 M });
4、附件
百度WebUploader上傳文件插件，grunt版
- uploader.war https://yunpan.cn/cPLpXa3P7JxUE （提取碼：c3ce）
web-uploader指令，寫了一個servlet來測試，可直接放在tomcat webapp下啟動tomcat測試，也可以導入eclipse中進行測試
一個小demo，非指令