演示地址：http://runjs.cn/detail/o4a55204
第一步：引入资源文件，
在 head 标签中引入资源
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> ???<link rel="stylesheet" href="pure/pure.css"/> ???<style> ???????.upload-wp{position: relative} ???????.upload-wp label.upload-agent{width: 225px!important;} ???????.upload-wp .upload-button{position:absolute;clip:rect(0 0 0 0);width: 100px; } ???</style>?<script src="angular-1.6.4/angular.min.js"></script>
?<script src="angular-file-upload.js"></script>
第二步：构建应用
html 标签上 加指令：ng-app="app"
body 标签上 加指令：ng-controller="AppController"
<div class="container"> ?<div class="pure-g"> ???<div class="pure-u-1-1"> ???????<div class="upload-wp"> ???????????<label for="uploadBtn" class="pure-button pure-button-primary upload-agent" >上传附件 <span style="font-size: .5em">（可以同时选中多个文件）</span></label> ???????????<input ?id="uploadBtn" class="upload-button"type="file" nv-file-select="" uploader="uploader" multiple ?/> ???????</div> ???</div> ???<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="item.remove()"> ???????????????????????<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> ???????????<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length"> ???????????????<span class="glyphicon glyphicon-upload"></span> 上传全部 ???????????</button> ???????????<!--<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">--> ???????????<!--<span class="glyphicon glyphicon-ban-circle"></span> 取消全部--> ???????????<!--</button>--> ???????????<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length"> ???????????????<span class="glyphicon glyphicon-trash"></span> 删除全部 ???????????</button> ???????</div> ???</div></div>第三步 js回调：
<script> ???‘use strict‘; ???angular.module(‘app‘, [‘angularFileUpload‘]) ???????????.controller(‘AppController‘, [‘$scope‘, ‘FileUploader‘, function($scope, FileUploader) { ???????????????$scope.attachList=[]; //附件 ???????????????var uploader = $scope.uploader = new FileUploader({ ???????????????????url: ‘/tianhe/file/uploadFile‘ //请求路径 ???????????????}); ???????????????// an async filter ???????????????uploader.filters.push({ ???????????????????name: ‘asyncFilter‘, ???????????????????fn: function(item /*{File|FileLikeObject}*/, options, deferred) { ???????????????????????console.log(‘asyncFilter‘); ???????????????????????setTimeout(deferred.resolve, 1e3); ???????????????????} ???????????????}); ???????????????// CALLBACKS ???????????????//点击添加附件失败回调 ???????????????uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) { ???????????????????console.info(‘onWhenAddingFileFailed‘, item, filter, options); ???????????????};
???????????????//添加单个附件之后回调 ???????????????uploader.onAfterAddingFile = function(fileItem) { ???????????????????console.info(‘onAfterAddingFile‘, fileItem); ???????????????};
//选中多个附件 ???????????????uploader.onAfterAddingAll = function(addedFileItems) { ???????????????????console.info(‘onAfterAddingAll‘, addedFileItems); ???????????????};
//上传单个附件 ???????????????uploader.onBeforeUploadItem = function(item) { ???????????????????console.info(‘onBeforeUploadItem‘, item); ???????????????};
//上传进度 ???????????????uploader.onProgressItem = function(fileItem, progress) { ???????????????????console.info(‘onProgressItem‘, fileItem, progress); ???????????????};
//上传所有附件 ???????????????uploader.onProgressAll = function(progress) { ???????????????????console.info(‘onProgressAll‘, progress); ???????????????};
//成功上传附件 ???????????????uploader.onSuccessItem = function(fileItem, response, status, headers) { ???????????????????console.info(‘onSuccessItem‘, fileItem, response, status, headers); ???????????????????console.log("----"); ???????????????????console.info(‘接口返回值response‘,response); ???????????????????console.log("****") ???????????????????console.info(‘uploader实例队列‘, uploader.queue); //queue包括所有用户add的附件，包括已经已上传和未上传的附件 ???????????????????console.log("****"); ???????????????????if(response.success){ ???????????????????????$scope.attachList.push(response.data); //每次上传成功获取附件附属信息 ???????????????????} ???????????????};
//上传附件失败 ???????????????uploader.onErrorItem = function(fileItem, response, status, headers) { ???????????????????console.info(‘onErrorItem‘, fileItem, response, status, headers); ???????????????};
???????????????//取消上传 ???????????????uploader.onCancelItem = function(fileItem, response, status, headers) { ???????????????????console.info(‘onCancelItem‘, fileItem, response, status, headers); ???????????????};
//完成单个附件的上传 ???????????????uploader.onCompleteItem = function(fileItem, response, status, headers) { ???????????????????console.info(‘onCompleteItem‘, fileItem, response, status, headers); ???????????????};
//上传全部附件后 ???????????????uploader.onCompleteAll = function() { ???????????????????console.info(‘onCompleteAll‘); ???????????????}; ???????????????//实例uploader对象 ???????????????console.info(‘uploader‘, uploader); ???????????}]);</script>
angular-file-upload 一款好用的文件上传组件
原文地址：http://www.cnblogs.com/lizimeme/p/7449854.html