Question

我使用html文件输入来选择要上传的文件。我创建了一个角度指令。现在我想为输入设置最大允许文件大小。如果文件大小大于允许的大小，则应该由指令返回错误。我是angularjs的新手，对指令一无所知。如果有人知道解释的解决方案，将不胜感激。

这是我的代码，直到现在。

HTML

<input type="file" id="flBook" name="flBook" valid-file required accept=".pdf" ng-model="ebook.file" ng-if="ebook.ebook_file.st_filename == undefined">
<span ng-if="formBook.$submitted || formBook.flBook.$touched" ng-cloak>
    <span class="text-red" ng-show="formBook.flBook.$valid == false" ng-cloak>E-Book is required.</span>
</span>

JS

app.directive('validFile', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attrs, ngModel) {
            //change event is fired when file is selected
            el.bind('change', function () {
                scope.$apply(function () {
                    ngModel.$setViewValue(el.val());
                    ngModel.$render();
                });
            });
        }
    }
});

Answer 1

采取一些自由并稍微更改了您的指令实现，因为您只是将文件路径绑定到ng-model而不是文件数据。还添加了文件大小检查（Max 2000 Bytes），可以更改为首选。这是工作plunker。

JS中的更改指令

angular.module('myApp', ['ng'])

    .directive('validFile', function($parse) {
        return {
            require: 'ngModel',
            restrict: 'A',
            link: function(scope, el, attrs, ngModel) {
                var model = $parse(attrs.ngModel);
                var modelSetter = model.assign;
                var maxSize = 2000; //2000 B
                el.bind('change', function() {

                    scope.$apply(function() {
                        scope.ebook.maxSizeError = false;
                        if (el[0].files.length > 1) {
                            modelSetter(scope, el[0].files);
                        } else {
                            modelSetter(scope, el[0].files[0]);
                        }
                        var fileSize = el[0].files[0].size;
                        if (fileSize > maxSize) {
                            scope.ebook.maxSizeError = true;
                        }
                    });
                });
            }
        }
    })
    .controller('Ctrl', ['$scope', function($scope) {
        $scope.ebook = {};//scope object to hold file details
        $scope.uploadDocs = function() {
            var file = $scope.ebook.file;
            console.log(file);
        };
    }]);

在您的HTML中

<body ng-controller="Ctrl">

  <input type="file" id="flBook" name="flBook" valid-file required accept=".pdf" ng-model="ebook.file" ng-if="ebook.ebook_file.st_filename == undefined">
  <span ng-if="formBook.$submitted || formBook.flBook.$touched" ng-cloak>
    <span class="text-red" ng-show="formBook.flBook.$valid == false" ng-cloak>E-Book is required.</span>
  </span>
  <p ng-show="ebook.maxSizeError">Max file size exceeded (2000 bytes)</p>
  <button ng-click="uploadDocs()">Upload</button>
</body>

Answer 2

我会说你需要配置后端以在达到特定大小时暂停上传。对于前端的东西，有许多随时可用的指令 - 只需搜索angular upload file backend。对于后端，您应该指明您用于进一步帮助的后端。

在angularjs中设置文件输入的最大大小

2 个答案: