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