2014-09-17 12 views
6

Ho un tipo di input = elemento file nel mio modulo. Voglio creare una direttiva personalizzata per verificare le dimensioni del file non appena seleziono un file utilizzando l'elemento di input. So come creare una direttiva personalizzata, ma c'è un modo in angularjs per determinare la dimensione del file dell'elemento selezionato. Non si deve usare Jquery.convalida la dimensione del file prima del caricamento per tipo di input = file utilizzando angularjs

Il js codice:

app.directive('checkFileSize',function(){ 
    return{ 
     require: 'ngModel', 
     link: function(scope, elem, attr, ctrl) { 
      // add a parser that will process each time the value is 
      // parsed into the model when the user updates it. 
      ctrl.$parsers.unshift(function (value) { 
       //i want to do something like this 
       var fileSize= // get file size here 
       if(fileSize>threshold){ 
        ctrl.$setValidity('checkFileSize',false);  
       } 
       // return the value to the model, 

       return someValue; 
      }); 
     } 
    } 
}); 
+0

Sì, è possibile , ma non specifico per Ang ular -http: //stackoverflow.com/questions/3717793/javascript-file-upload-size-validation. Si potrebbe facilmente incorporare questo in una direttiva di convalida angolare – pixelbits

+0

A I: è possibile consolidare e fornire la soluzione che ha funzionato per voi pls. Grazie ! – PavanSandeep

risposta

7

Come controllare la dimensione del file da una direttiva:

app.directive('checkFileSize',function(){ 
    return{ 
     link: function(scope, elem, attr, ctrl) { 
      $(elem).bind('change', function() { 
       alert('File size:' + this.files[0].size); 
      }); 
     } 
    } 
}); 

versione non jquery:

app.directive('checkFileSize', function() { 
    return { 
    link: function(scope, elem, attr, ctrl) { 
     function bindEvent(element, type, handler) { 
     if (element.addEventListener) { 
      element.addEventListener(type, handler, false); 
     } else { 
      element.attachEvent('on' + type, handler); 
     } 
     } 

     bindEvent(elem[0], 'change', function() { 
     alert('File size:' + this.files[0].size); 
     }); 
    } 
    } 
}); 

http://plnkr.co/edit/ybuk6K6YNTIwnLTK5I6Z?p=preview

+0

funziona. Ma sembra che stia usando jquery. Hai una soluzione che non usa jquery? –

+0

@ A. Ho aggiornato plunkr per utilizzare la versione non jquery –

+0

impressionante! Questo approccio risolve il mio problema per ora. –

Problemi correlati