Wie kann ich das begrenzen der Größe der Anlage (Datei-upload) in AngularJS?

Ich will der beste Weg, um das hochladen von Dateien mit lade Bild in AngularJS. Gleichzeitig möchte ich begrenzen Sie die Größe auf 10 MB.

Bitte geben Sie der beste Weg, dies zu erreichen?

InformationsquelleAutor prince | 2014-02-24

10

Während diese Frage ist etwas alt, ich denke immer noch, es lohnt sich, um die best mögliche Antwort für diejenigen, die es sucht. Die obige Antwort setzt auf jQuery auf die oberflächlichen Aspekte, aber lassen Sie uns einen passenden Stil für Eckige Entwicklung.

Ich hier verweisen die eigentliche Bibliothek Autors eigene Empfehlung, wenn die gleiche Frage gestellt, verändern Sie die Größe bat in der Frage oben:
```
uploader = new FileUploader();
//...
uploader.filters.push({
    'name': 'enforceMaxFileSize',
    'fn': function (item) {
        return item.size <= 10485760; //10 MiB to bytes
    }
});
```
BEISPIEL OBEN AKTUALISIERT:, um änderungen an der angular-file-upload API.

Beachten Sie, dass diese stützt sich auf die Datei size Attribut (Blob-Größe in bytes), die unterstützt wird nur von modernen Browsern (nämlich IE10 und höher).

Ähm... auf den zweiten Gedanken, was die Hölle ist uploader im Beispiel oben, oder zumindest wo sollen Sie .push den Filter?!
Sorry für die Unklarheiten. uploader ist eine Instanz von FileUploader a la uploader = new FileUploader();. Ein update der Beispiel.
auch meine aktualisierten code-Beispiel, um änderungen an der Winkel-Datei-upload FileUploader#filters API.

InformationsquelleAutor runderworld

Können Sie diese lib:

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

InformationsquelleAutor Jack

Diesem Beispiel sehen Sie eine Vorstellung

HTML-CODE :

  <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;
        }

    });
});

seine bereits in jsfiddle

InformationsquelleAutor Murugan Pandian

Dies ist die Richtlinie, die ich verwenden, um beide ziehen Sie die Datei in Angulars Umfang, überprüfen Sie die Größe der Datei zu validieren und Erweiterungen.

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>

InformationsquelleAutor CountZero

Use-Direktive

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]);

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

InformationsquelleAutor Imran Kabir

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.