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 }} MBtd>
                                 <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-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)

              

 

 

           

  

 

转载于:https://www.cnblogs.com/lizimeme/p/7472111.html