终于拿下Angularjs中自定义上传文件!!!

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_36193631/article/details/78948091

2018年,新的一天,新的开始,今天终于把这个优化的需求改好了,记录一下。
2017年岁末的时候,我开始听知乎live,听了一篇忘记名字的大咖讲到,养成写博客的习惯,即可以帮助有需要的人,更重要的是能够帮你提升思维,特别是在技术遇到瓶颈时,写下一篇解决问题的技术博客,有助于重燃激情,废话不多讲…

实现需求:
1.根据设置的不同,可能有多个上传功能
2.流程是初始化为“上传表格”,选中后为“上传中…”,(请求结束后上传按钮才可点击)结束后为“继续上传”(按钮可以点击)

效果图:
这里写图片描述

list.html

<tbody>
    <tr ng-repeat="prize in prize_list">
        <td ng-bind="prize.name"></td>
        <td ng-bind="prize.code_cnt || 0"></td>
        <td>
            <dzp-file-upload index="$index" list="prize_list" ng-if="prize.status == 1" btn-name="上传表格" disable="prize.disable" change="uploadExcel(file, prize)"></dzp-file-upload>
            <dzp-file-upload index="$index" list="prize_list" ng-if="prize.status == 2" btn-name="上传中..." disable="prize.disable" change="uploadExcel(file, prize)"></dzp-file-upload>
            <dzp-file-upload index="$index" list="prize_list" ng-if="prize.status == 3" btn-name="继续上传" disable="prize.disable" change="uploadExcel(file, prize)"></dzp-file-upload>
       </td>
         <td ng-bind="prize.tip"></td>
    </tr>
</tbody>

list.js

//初始化数据:
 $scope.showCodeModal = function (dzp) {
        $scope.dzp_id = dzp.id;
        apiService.post("/werenwu/dzp/virtualPrize", { id: $scope.dzp_id }).success(function (res) {
            $scope.prize_list = [];
            res.data.list && res.data.list.forEach(function (value) {
                value.status = 1;
                value.index = '';
                value.disable = false;
                $scope.prize_list.push(value);
            });
            res.data.list.length == 0?$scope.dialog = true:$scope.dialog = false;
        });
        $("#code-modal").modal("show");
    };

//上传接口:
 $scope.uploadExcel = function (file, prize) {
     var form = new FormData();
     form.append("code_excel", file);
     form.append("prize", prize.prize);
     form.append("id", $scope.dzpList[0].id);
     setTimeout(function(){
         apiService.file("/werenwu/dzp/importCode", form).success(function (res) {
             if (res.errcode == 0) {
                 prize.code_cnt = res.data.total;
                 prize.tip = "上传完成,成功了" + res.data.success + "条, 失败了" + res.data.error + "条"
                } else {
                    swal("错误", res.errmsg, "error");
                }
                if(res.errcode!== ''){
                    for(var key in $scope.prize_list){
                        if($scope.prize_list[key].index == prize.index && $scope.prize_list[key].status == 2){
                            $scope.prize_list[key].status = 3;
                            $scope.prize_list[key].disable = false;
                        }
                    }
                }
            });
        }, 500);
    };

dzpFileUpload.html

<style>
    .fileUpload-wrap {
        position: relative;
    }
    .fileUpload-wrap input {
        position: absolute;
        top: 0;
        left: 0;
        width: 85px;
        bottom: 0;
        z-index: -1;
    }
</style>
    <div class="fileUpload-wrap">
        <button type="button" class="btn btn-success" ng-click="clickHandle()">{{btnName}}</button>
        <input ng-required="ngRequired" type="file" ng-style="inputStyle" ng-disabled="disable"/>
    </div>

dzpFileUpload.js

angular.module("app").directive("dzpFileUpload", [function () {
    return {
        scope: {
            fileBase64: '=',
            fileModel: '=',
            btnName: '@',
            reChooseName: '@',
            ngRequired: '=',
            inputStyle: '=',
            maxSize: '@',
            minSize: '@',
            fileType: '@',
            errorInfo: '@',
            showName: '@',
            change: "&",
            disable: "=disable",
            index: "=index",
            list: "=list",
        },
        restrict: "E",
        templateUrl: '/views/directives/dzpFileUpload.html',
        link: function (scope, element, attributes) {
            var rule = new RegExp(scope.fileType);
            var fileInput = element.find('input');
            scope.clickHandle = function () {
                fileInput.trigger('click');
            };
            scope.editList = function(status,current){
                for(var key in scope.list){
                    if(scope.index == key){
                        scope.list[key].status = status;
                        scope.list[key].index = current;
                        scope.list[key].disable = true;
                    }
                }
            }

            scope.reChooseName = scope.reChooseName ? scope.reChooseName : "重新选择";
            scope.$watch("fileModel", function () {
                if (!scope.fileModel) {
                    $(element[0]).find("input[type=file]").val("");
                }
            });
            fileInput.bind("change", function (changeEvent) {
                scope.current = changeEvent.originalEvent.path[4].rowIndex;
                scope.editList(2,scope.current);
                var file = changeEvent.target.files[0];
                if (!file) return;
                if (scope.fileType && !file.type.match(rule)) {
                    return swal(scope.errorInfo || '上传文件类型错误', '请重试', 'error')
                }
                if (scope.maxSize && file.size / 1024 > scope.maxSize) {
                    return swal('上传大小不能超过' + scope.maxSize / 1024 + "M", '请重试', 'error')
                }
                if (scope.minSize && file.size < scope.minSize) {
                    return swal('上传大小不能超过' + scope.minSize, '请重试', 'error')
                }
                if (file.name.length > 30) {
                    scope.filename = file.name.substr(0, 10) + "......" + file.name.substr(-12);
                } else {
                    scope.filename = file.name;
                }

                if (scope.change) {
                    scope.change({
                        "file": file
                    });
                }
                scope.fileModel = file;

                if (file.type.match(rule)) {
                    // 预览图片
                    var reader = new FileReader();
                    reader.onload = function (loadEvent) {
                        scope.$apply(function () {
                            scope.fileBase64 = loadEvent.target.result;
                        });
                    }
                    reader.readAsDataURL(file);
                }
            });
        }
    }
}]);

实现总结:

1.自定义指令好写,但真的写起来,中间再互相引用传值,就是控制器与指令之间如何修改想要的值,如果对scope作用域不了解,还是会遇到一些坑
2.网上不会有相同的需求,还是要自己去设计代码实现,也就是自己要有思路
3.自定义指令部分,只在为文件检验,上传做准备,看看文件上传的几个属性应该就可以
4.更合乎用户体验的需求,就要费点事了,主要是通过关联ng-repeat,ng-if,操控result添加自己需要控制状态的属性
实现:
4.1在数据集中添加自己需要控制状态的属性,做好初始化,在list.html,list.js中有
4.2在自定义指令dzpFileUpload.js中获取要改变的数据list,改变status和disabled,
4.3在请求结束后再次改变状态
4.4我之前是把要操控的数据放在了自定义指令中,把显示层做在了自定义的html片段上,这样在成功后修改状态时,在自定义指令中常规获取应该获取的还是没有改变的状态,要调用$watch检测,这样感觉影响性能(这是我上一版的做法,测试没有发现,是我自己点出来的,今天闲来无事完善了一下)

展开阅读全文

没有更多推荐了,返回首页