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

来源：互联网发布：结构化面试知乎编辑：程序博客网时间：2024/04/26 20:39

参考资料：

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" onclick="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）后台代码（略）

1 0