angular-file-upload 限制文件上傳個數 獲取已上傳文件隊列

 引入資源同上一篇隨筆第一步，再也不贅述，

 第二步：構建應用

     html 標籤上 加指令：ng-app="app" 

     body 標籤上 加指令：ng-controller="AppController" 

    html代碼:

    

<div class="pure-u-1-1" style="margin-bottom: 40px" >

                         <h3>文件隊列</h3>
                         <p>隊列長度: {{ uploader.queue.length }}</p>

                         <table class="table">
                             <thead>
                             <tr>
                                 <th width="50%">文件名稱</th>
                                 <th ng-show="uploader.isHTML5">大小</th>
                                 <th ng-show="uploader.isHTML5">進度</th>
                                 <th>狀態</th>
                                 <th>操做</th>
                             </tr>
                             </thead>
                             <tbody>
                             <tr ng-repeat="item in uploader.queue">
                                 <td><strong>{{ item.file.name }}</strong></td>
                                 <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                                 <td ng-show="uploader.isHTML5">
                                     <div class="progress" style="margin-bottom: 0;">
                                         <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                                     </div>
                                 </td>
                                 <td class="text-center">
                                     <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                                     <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                     <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                                 </td>
                                 <td nowrap>
                                     <!--<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">-->
                                         <!--<span class="glyphicon glyphicon-upload"></span> 上傳-->
                                     <!--</button>-->
                                     <!--<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                         <span class="glyphicon glyphicon-ban-circle"></span> 取消
                                     </button>-->
                                     <button type="button" class="btn btn-danger btn-xs" ng-click="removeFile(item)">
                                         <span class="glyphicon glyphicon-trash"></span> 刪除
                                     </button>
                                 </td>
                             </tr>
                             </tbody>
                         </table>

                         <div>
                             <div>
                                 隊列總進度:
                                 <div class="progress" style="">
                                     <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                                 </div>
                             </div>
                         
                         </div>

                     </div>

View Code

 

   第三步：  js代碼，主要實現：

                限制文件上傳個數，

                配置uploader添加文件即上傳，

                上傳成功獲取當前file的response,

                uploader.removeFromQueue(index)

              

<script>
    'use strict';
    angular.module('app', ['angularFileUpload'])
            .controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {

  //附件數組
         $scope.attachList=[];

        //上傳附件
        var uploader = $scope.uploader = new FileUploader({
            url: '/knowledge/file/upload'
        });
        //限制上傳的文件數量
        uploader.queueLimit=10;
        //上傳後就刪除，清除queue
        //uploader.removeAfterUpload= false;
        //添加文件自動上傳
        uploader.autoUpload  =true;
        //自定義過濾器
        uploader.filters.push({
            name: 'asyncFilter',
            fn: function(item , options, deferred) {
                console.log('asyncFilter');
                setTimeout(deferred.resolve, 1e3);
            }
        });
         //自定義的刪除單個文檔的方法
         $scope.removeFile = function(item){
            var curIndex = uploader.getIndexOfItem(item);
             uploader.removeFromQueue(curIndex);
             $scope.attachList.splice(curIndex,1);
             console.info('$scope.attachList',$scope.attachList);
             console.info('queue',uploader.queue);
         }

        uploader.onBeforeUploadItem = function(item) {
            //console.info('onBeforeUploadItem', item);
        };
        uploader.onSuccessItem = function(fileItem, response, status, headers) {
            //uploader.queue
            console.info(uploader.queue); //測試用
            //length
            console.info("queue length:"+uploader.queue.length);//測試用
            //fileItem
            console.info("fileItem:",fileItem);
            //curIndex
            var number= uploader.getIndexOfItem(fileItem);
            console.info("getIndexOfItem:",number);//測試用
            //notUploadArr
            var notuploadArr =uploader.getNotUploadedItems();
            console.info("notuploadArr:",notuploadArr);//測試用
      
            if(response.success){
                if(response.data!=null&&response.data.length>0)
                   $scope.attachList.push(response.data[0]);

            };


        };

   }]);

</script>