Angular-file-upload文件上传插件的使用

参考资料：

Github：https://github.com/nervgh/angular-file-upload

简单案例：http://nervgh.github.io/pages/angular-file-upload/examples/simple/

带图片预览案例：http://nervgh.github.io/pages/angular-file-upload/examples/image-preview/

 

一、上传多个图片，选择后手动触发上传：

（1）引用相关文件

   <link href="/assets/JS/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="/assets/JS/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/JS/AngularJS/angular.js"></script>
   <script type="text/javascript" src="/assets/JS/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/Assets/JS/AngularJS/angular-file-upload/angular-file-upload.min.js"></script>

 

（2）Html代码

                        <!-- 上传公司照片 -->
                        <div class="row" nv-file-drop="" uploader="uploaderPhotos" filters="queueLimit, customFilter">
                            <div class="col-sm-12 col-xs-12">
                                <div class="form-group form-group-xs ">
                                    <label class="col-sm-1_5 col-xs-3  control-label ">公司照片:<br />（最多5张）</label>
                                    <div class="col-sm-2 col-xs-12 " ng-repeat="item in uploaderPhotos.queue">
                                        <div class=" ddh-panel2  ddh-width-full ddh-height-100"  ng-show="uploaderPhotos.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
                                        <input type="text" ng-model="item.file.Desc" class=" form-control-static"  placeholder="请输入描述文本"/>
                                        <a href="#" class="" ng-click="uploaderPhotos.funcRemoveItem(item)"><span class="glyphicon glyphicon-trash"></span></a>
                                        <strong ng-bind="item.file.name"></strong>
                                    </div>
                                    <div class="col-sm-2 col-xs-12 ">
                                        <input id='hiddenFilePhotos' type="file" nv-file-select="" uploader="uploaderPhotos" ng-show="" multiple />
                                        <button class=" ddh-panel2 ddh-width-full ddh-height-100" onclick="javascript: $('#hiddenFilePhotos').click();" ng-show="uploaderPhotos.AllowAdd">点击添加<br />公司照片</button>
                                    </div>

                                </div>
                            </div>
                        </div>

 

 

（3）JS代码

//在模块中引用 
var app = angular.module('appMain', ['angularFileUpload']);

//在控制器中引用
  app.controller('ctrlMain', function ($scope, $rootScope, $http, $window, $location, $log, FileUploader) {
            //=======UpLoaderPhotos相关 Start======//
            var uploaderPhotos = $scope.uploaderPhotos = new FileUploader({
                url: "/HandlerApi.GetApiJson.tclywork?ApiPath=Test/Get"
            });
            $scope.uploaderPhotos.AllowAdd = true;//自己添加的，用于限制上传数量
            $scope.uploaderPhotos.onAfterAddingFile = function (fileItem) {
                while (this.queue.length > 5) {
                    this.removeFromQueue(0);
                }
                this.AllowAdd = (this.queue.length < 5);
                console.log(this);
            };
            //自己添加的，用于在移除图片时，重新计算
            $scope.uploaderPhotos.funcRemoveItem = function (fileItem) {
                fileItem.remove();
                this.AllowAdd = (this.queue.length < 5);
                console.log(this);
            };
            //保存图片
            $scope.funcSaveCompanyInfo = function () {
                //先判断是否有未上传完成的图片，若有先传图片，否则直接上传表单数据
                if (uploaderPhotos.getNotUploadedItems().length > 0) {

                    uploaderPhotos.uploadAll();
                }
                else {
      
                }
            }
            //上传控件：回调响应：
            $scope.uploaderPhotos.onBeforeUploadItem = function (item) {
                item.formData = [{ Desc: item.file.Desc }];//上传前，添加描述文本
                console.log("onBeforeUploadItem：");
                console.log(item.formData);
            }
            //上传控件：回调响应：
            $scope.uploaderPhotos.onCompleteItem = function (item,response,status,headers) {

                console.log("onCompleteItem " + JSON.stringify(response));
                //
                if (response.code == "200") {
                    $scope.modelPosition.Images += response.data.id;
                }
                console.log($scope.modelPosition.Images);
            };
            //上传控件：回调响应：
            $scope.uploaderPhotos.onCompleteAll = function () {
                console.log("CompleteAll");
                funcSaveCompanyInfoFormData();
            }





}

 

 

（4）后台代码（略）

 

 

 二、上传单个图片，选择后立即上传：

 

（1）引用相关文件（参见上）

 

（2）Html代码

                        <span class="pull-right" nv-file-drop="" uploader="uploaderResume" filters="queueLimit, customFilter">
                            <input id='hiddenFileResume' type="file" nv-file-select="" uploader="uploaderResume" ng-show="" />
                            <button class="btn btn-success btn-xs" οnclick="javascript: $('#hiddenFileResume').click();">直接上传简历</button>
                        </span>

 

（3）JS代码

//在模块中引用 
var app = angular.module('appMain', ['angularFileUpload']);

//在控制器中引用
  app.controller('ctrlMain', function ($scope, $rootScope, $http, $window, $location, $log, FileUploader) {
   
            //=======UpLoaderResume相关 Start======//
            var uploaderResume = $scope.uploaderResume = new FileUploader({
                url: "/HandlerApi.GetApiJson.tclywork?ApiPath=Test/Get",
                autoUpload: true,//添加后，自动上传
            });
            //
            $scope.uploaderResume.onAfterAddingFile = function (fileItem) {
                console.log("onAfterAddingFile");
                console.log(fileItem);
                console.log(this);
            };
            //
            $scope.uploaderResume.onBeforeUploadItem = function (fileItem) {
                console.log("onBeforeUploadItem");
            };
            //
            $scope.uploaderResume.onCompleteItem = function (fileItem, response, statu, headers) {
                console.log("onCompleteItem");
                console.log(response);
            };

}

 

（4）后台代码（略）