angular-file-upload 一款好用的文件上傳組件
阿新 • • 發佈：2017-08-29
對象 failed ati 路徑 scan ready cancel console function 
演示地址：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 classView Code="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 一款好用的文件上傳組件