引入资源同上一篇随笔第一步，不再赘述，
第二步：构建应用
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>
angular-file-upload 获取已上传文件队列
原文地址：http://www.cnblogs.com/lizimeme/p/7472111.html