：构建应用html标签上加指令-appbody标签

第二步：构建应用

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

    'use strict';
    angular.module('app', ['angularFileUpload'])
            .controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {

   }]);

分类：

技术点：

相关文章：