web-dev-qa-db-fra.com

Comment puis-je limiter la taille de la pièce jointe (téléchargement de fichier) dans AngularJS?

Je veux la meilleure façon de télécharger des fichiers avec l'image de chargement dans AngularJS. En même temps, je veux limiter la taille à 10 Mo.

S'il vous plaît donner le meilleur moyen d'y parvenir?

angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeatangular-ui
13
prince

Bien que cette question soit un peu ancienne, je pense toujours que cela vaut la peine de fournir la meilleure réponse possible à ceux qui la cherchent. La réponse ci-dessus repose sur jQuery pour les aspects superficiels, mais utilisons un style adapté au développement Angular.

Ici, je fais référence à la recommandation de l'auteur de la bibliothèque lorsqu'on lui pose la même question, en la modifiant pour la taille demandée dans la question ci-dessus:

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

EXEMPLE MIS À JOUR CI-DESSUS: pour refléter les modifications apportées à l'API angular-file-upload.

Notez que cela repose sur l'attribut size du fichier ( taille de blob en octets ), qui n'est pris en charge que par les navigateurs modernes (notamment IE10 et versions ultérieures).

10
runderworld

Vous pouvez utiliser cette 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
5
Jack

Voir cet exemple, vous avez une idée 

CODE HTML :

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

SCÉNARIO:

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

    });
});

c'est déjà dans jsfiddle

4
Murugan Pandian

C’est la directive que j’utilise pour extraire le fichier dans le champ d’application Angularjs, valider la taille du fichier et valider les extensions. 

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>
0
CountZero

Directive d'utilisation 

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

 });                
}          
 });    
 }   
};
}]);
0
Imran Kabir