angular-file-upload 擷取已上傳檔案隊列

標籤：func   取消   open   span   img   disabled   red   cancel   bottom   

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

 第二步：構建應用

     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>

 

 

           

  

 

angular-file-upload 擷取已上傳檔案隊列