Set max size for file input

前端未结

关注

 2  1987

I have used HTML file input to select a file for uploading using a custom AngularJS directive. Now I want to set the max allowed file size for the input. If the file size is

相关标签:

2条回答

小鲜肉

2021-01-17 02:28

I would say you need to configure the backend to halt the upload when a certain size is reached. There are a number of ready to use directives, for the front-end stuff - just search for angular upload file backend. For the backend, you should indicate the backend you use for further help.

0 讨论(0)
发布评论:

提交评论
- 加载中...

庸人自扰

2021-01-17 02:36

Took some liberty and changed your directive implementation a little bit as you are just binding the path of the file to your ng-model instead of file data.Also added the file size check (Max 2000 Bytes) which can changed as preferred. Here is the working plunker.

Changed directive in 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);
        };
    }]);

In your 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>

0 讨论(0)