标签：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>
第三步： 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>
标签：func 取消 open span img disabled red cancel bottom
原文地址：http://www.cnblogs.com/lizimeme/p/7472111.html
