angular-file-upload 一款好用的文件上传组件，基本应用

基本应用演示地址：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>