Convalida estensione file in AngularJs prima del caricamento

Question

Sto caricando immagini per la nostra applicazione sul server. C'è un modo per convalidare le estensioni nel lato client da parte di JS prima di inviarle al server prima di caricarle sul server?

Sto usando AngularJs per gestire il mio front-end.

Answer 1

È possibile utilizzare questo semplice javascript per convalidare. Questo codice dovrebbe essere inserito all'interno di una direttiva e sul cambio del controllo del caricamento dei file.

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

In alternativa è possibile utilizzare JavaScript metodo substring anche:

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

Answer 2

È possibile aggiungere una direttiva personalizzata che controlla la matrice element.files per verificare il tipo sull'evento onchange. Non esiste alcuna convalida incorporata per l'input di file.

Answer 3

File Upload using AngularJS

ci sono molti moduli che possono aiutare con questo. Ognuno di questi dovrebbe consentire di definire un filtro per caricare solo determinate estensioni di file.

Se si sta cercando una soluzione più semplice, è possibile utilizzare qualcosa come string.js per garantire che i nomi file dei file caricati siano di estensione ".png".

Answer 4

È possibile creare una direttiva angolare, qualcosa di simile a questo dovrebbe funzionare (Modificare i valori accettati nella matrice validFormats);

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

Answer 5

per la validazione cioè richiesto, file di estensione, dimensioni direttiva .Create personalizzato e utilizzato il modulo angolare js ng-messaggio per semplificare gli errori di convalida

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> 

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

Richiede angular-messages.min.js

Answer 6

Ecco il codice completo per la convalida dei file con estensione AngularJs usign