Validation de l'extension du fichier dans AngularJs avant le téléchargement

Je suis de télécharger des images pour notre application sur le serveur.
Est-il possible de valider les extensions côté client par JS avant de les soumettre au serveur avant de les télécharger vers le serveur?

Je suis en utilisant AngularJs pour gérer mon front-end.

source d'informationauteur Ali Saberi

  1. 20

    Vous pouvez utiliser ce simple javascript pour valider. Ce code doit être mis à l'intérieur d'une directive et sur la modification du fichier de contrôle de téléchargement.

    var extn = filename.split(".").pop();

    Alternativement, vous pouvez utiliser javascript sous-chaîne de la méthode aussi:

    fileName.substr(fileName.lastIndexOf('.')+1)
  2. 11

    Vous pouvez créer un angulaire de la directive, quelque chose comme cela devrait fonctionner (Modifier les valeurs acceptées dans le validFormats array);

    HTML:

        <form name='fileForm' >
        <input type="file" name="file" ng-model="fileForm.file" validfile>
    </form>

    Javascript:

    angular.module('appname').directive('validfile', function validFile() {

    var validFormats = ['jpg', 'gif'];
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$validators.validFile = function() {
                elem.on('change', function () {
                   var value = elem.val(),
                       ext = value.substring(value.lastIndexOf('.') + 1).toLowerCase();   

                   return validFormats.indexOf(ext) !== -1;
                });
           };
        }
    };
});
  3. 4

    pour la validation de fichier je.e nécessaire,l'extension de fichier,taille.Créer des directive et utilisé angular js ng-message module pour simplifier les erreurs de validation

    HTML

    <input type="file" ng-model="imageFile" name="imageFile" valid-file required>

<div ng-messages="{FORMNAME}.imageFile.$error" ng-if="{FORMNAME}.imageFile.$touched">
     <p ng-message="required">This field is required</p>
     <p ng-message="extension">Invalid Image</p>
 </div>

    Angular JS

    customApp.directive('validFile', function () {
return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ngModel) {
        var validFormats = ['jpg','jpeg','png'];
        elem.bind('change', function () {
            validImage(false);
            scope.$apply(function () {
                ngModel.$render();
            });
        });
        ngModel.$render = function () {
            ngModel.$setViewValue(elem.val());
        };
        function validImage(bool) {
            ngModel.$setValidity('extension', bool);
        }
        ngModel.$parsers.push(function(value) {
            var ext = value.substr(value.lastIndexOf('.')+1);
            if(ext=='') return;
            if(validFormats.indexOf(ext) == -1){
                return value;
            }
            validImage(true);
            return value;
        });
    }
  };
});

    Besoin
    angular-messages.min.js

  4. 1

    Voici le code complet pour la validation de l'extension de fichier avec AngularJs

    <!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type='text/javascript'>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.setFile = function(element) {
$scope.$apply(function($scope) {
$scope.theFile = element.files[0];
$scope.FileMessage = '';
var filename = $scope.theFile.name;
console.log(filename.length)
var index = filename.lastIndexOf(".");
var strsubstring = filename.substring(index, filename.length);
if (strsubstring == '.pdf' || strsubstring == '.doc' || strsubstring == '.xls' || strsubstring == '.png' || strsubstring == '.jpeg' || strsubstring == '.png' || strsubstring == '.gif')
{
console.log('File Uploaded sucessfully');
}
else {
$scope.theFile = '';
$scope.FileMessage = 'please upload correct File Name, File extension should be .pdf, .doc or .xls';
}
});
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="file"
onchange="angular.element(this).scope().setFile(this)">
{{theFile.name}}
{{FileMessage}}
</div>
</body>
</html>
  5. 0

    Vous pouvez ajouter une coutume directive qui vérifie l' element.files tableau afin de vérifier le type sur la onchange événement.
    Il n'y a pas intégré de validation de fichier d'entrée.

  6. 0

    Upload de fichier en utilisant AngularJS

    Il existe de nombreux modules qui peuvent vous aider avec cela. Une de ces doit vous permettre de définir un filtre à seulement télécharger certaines extensions de fichier.

    Si vous êtes à la recherche d'une solution plus simple, vous pouvez utiliser quelque chose comme string.js pour assurer les noms des fichiers téléchargés sont d'extension".png'.