今天完成的事情：state.go传参到Url成功，图片只是上传到了服务器，获取到了图片的网址

明天计划的事情：完善图片上传功能，增加上线下线

遇到的问题:对于文件上传这一块不熟悉，纠结上传图片要不要用插件，因为用插件也不太会，不用插件也不太会。

收获：学会了图片上传以及读取图片文件名

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();

            }

}