发表于: 2017-06-28 23:23:24

1 849


今天完成的事情: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();

            }

}



返回列表 返回列表
评论

    分享到