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>

 

   第三步：  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>