基本应用演示地址：http://runjs.cn/detail/o4a55204
下一篇 lizi 将会展示关于angular-file-upload的 拓展应用
第一步：引入资源文件，
在 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>
Live and learn ;)
