发表于: 2017-07-25 10:28:29

1 800


今天完成的事情:公司新增的三个图片上传服务以及表单的补全。

明天计划的事情:完成新增公司页面,编辑页面,以及职位页面。

遇到的问题:在插件上花费了大量的时间。

收获:图片上传插件的使用。

github地址:https://github.com/nervgh/angular-file-upload;

官方api:https://github.com/nervgh/angular-file-upload/wiki/Module-API;

使用方法:

    //图片上传配置

    var uploader = vm.uploader = new FileUploader({

        url: "/carrots-admin-ajax/a/u/img/task",

        queueLimit: 1

    });

   uploader.onAfterAddingFile = function(fileItem) {

        vm.fileItem = fileItem._file;

    };

    uploader.onSuccessItem = function(fileItem, response, status, headers) {

        vm.logo = response.data.url;

    };




                           <label for="choosePicture" class="btn btn-primary">选择文件</label>

                                <input id="choosePicture" type="file" nv-file-select uploader="vm.uploader">

  <img style="max-height: 150px;max-width: 600px;" ng-src="{{vm.logo}}" alt="配图预览">

        <tr ng-repeat="item in vm.uploader.queue">

                                                <td ng-bind="item.file.name"></td>

                                                <td>

                                                    <span ng-bind="item.file.size/1024/1024|number:2"></span>MB

                                                </td>

                                                <td>

                                                    <div class="progress">

                                                        <div class="progress-bar" ng-style="{'width':item.progress+'%'}" ng-bind="item.progress+'%'"></div>

                                                    </div>

                                                </td>

                                                <td>

                                                <span ng-show="item.isSuccess" style="display: none;"><i class="glyphicon glyphicon-ok"></i></span>

                                                <span ng-show="item.isCancel" style="display: none;"><i class="glyphicon glyphicon-ban-circle"></i></span>

                                                <span ng-show="item.isError" style="display: none;"><i class="glyphicon glyphicon-remove"></i></span>

                                                </td>

                                                <td>

                                                    <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-danger btn-xs" ng-click="item.remove()"><span class="glyphicon glyphicon-trash"></span>删除</button>

                                                    </td>

                                            </tr>



返回列表 返回列表
评论

    分享到