Wie kann ich die Größe des Anhangs (Dateiupload) in AngularJS beschränken?

Obwohl diese Frage etwas alt ist, halte ich es dennoch für sinnvoll, denjenigen, die sie suchen, die bestmögliche Antwort zu geben. Die obige Antwort basiert auf jQuery für die oberflächlichen Aspekte, aber verwenden wir einen Stil, der für die Entwicklung von Angular geeignet ist.

Hier beziehe ich mich auf die tatsächliche Empfehlung des Bibliotheksautors , wenn dieselbe Frage gestellt wird und sie für die in der obigen Frage angegebene Größe ändert:

uploader = new FileUploader();
//...
uploader.filters.Push({
    'name': 'enforceMaxFileSize',
    'fn': function (item) {
        return item.size <= 10485760; // 10 MiB to bytes
    }
});

BEISPIEL AKTUALISIERT:, um Änderungen an der angular-file-upload-API anzuzeigen.

Beachten Sie, dass dies auf dem Attribut size der Datei ( Blobgröße in Bytes ) beruht, das nur von modernen Browsern (IE10 und höher) unterstützt wird.

Sie können diese Bibliothek verwenden:

https://github.com/danialfarid/ng-file-upload

  ngf-min-size='10' // minimum acceptable file size in bytes
  ngf-max-size='1000' // maximum acceptable file size in bytes

In diesem Beispiel erhalten Sie eine Vorstellung 

HTML QUELLTEXT :

  <form  class="upload-form">
        <input class="upload-file" data-max-size="2048" type="file" >
        <input type=submit>
    </form>

SKRIPT:

$(function(){
    var fileInput = $('.upload-file');
    var maxSize = fileInput.data('max-size');
    $('.upload-form').submit(function(e){
        if(fileInput.get(0).files.length){
            var fileSize = fileInput.get(0).files[0].size; // in bytes
            if(fileSize>maxSize){
                alert('file size is more than ' + maxSize + ' bytes');
                return false;
            }else{
                alert('file size is correct - '+fileSize+' bytes');
            }
        }else{
            alert('Please select the file to upload');
            return false;
        }

    });
});

es ist schon in jsfiddle

Dies ist die Direktive, die ich verwende, um die Datei in den Angularjs-Bereich zu ziehen, die Dateigröße zu überprüfen und Erweiterungen zu überprüfen. 

var fileUpload = () => {

    return {
        scope: {
            file: '='
        },
        require: 'ngModel',
        link(scope, el, attrs, ctrl) {

            el.bind('change', (event) => {
                var file = event.target.files[0];
                var extn = file.name.split(".").pop().toLowerCase();

                if (attrs.validExtensions != null) {
                    const extensions = attrs.validExtensions.split(',');
                    var validExtension = false;

                    extensions.forEach((x) => {
                        if (x === extn) {
                            validExtension = true;
                        }
                    });

                    ctrl.$setValidity('type', validExtension);
                }

                if (attrs.maxSize != null) {
                    var maxSize = attrs.maxSize;

                    var valid = (file.size / 1024) <= maxSize;
                    ctrl.$setValidity('size', valid);
                } else {
                    console.log('max size ScriptNotifyEvent set');
                }

                scope.file = file ? file : undefined;
                scope.$apply();
            });
        }
    };
};

HTML

<input type="file" file="File1" id="File1" name="File1" ng-model="File1" valid-extensions="doc,docx,xls,xlsx,pdf,tiff,Zip,ppt,pptx" max-size="20000" />

<div class="alert alert-danger" ng-show="form.File1.$error.type && (form.File1.$touched || Submitted)" Role="alert">This form only allows the following file types: *.doc, *.docx, *.xls, *.xlsx, *.ppt, *.pptx, *.pdf, *.tiff, *.Zip</div>

<div class="alert alert-danger" ng-show="form.File1.$error.size && (form.File1.$touched || Submitted)" Role="alert">The file is too large to send to us, please limit indivudual files to 20 megabytes.</div>

Direktive verwenden

ngApp.directive('fileModel', ['$parse', function ($parse) {

return {

restrict: 'A',

link: function (scope, element, attrs) {

var model = $parse(attrs.fileModel);

var modelSetter = model.assign;

 element.bind('change', function () {

var fileSize = this.files[0].size / 1024;

if (fileSize > 600) {

alert("File size is larze; maximum file size 600 KB");

} else {

scope.$apply(function () {

 modelSetter(scope, element[0].files[0]);

 });                
}          
 });    
 }   
};
}]);