2014-09-17 22 views
6

Mam typ wejściowy = element pliku w moim formularzu. Chcę utworzyć niestandardową dyrektywę do sprawdzania rozmiaru pliku, gdy tylko wybiorę plik przy użyciu elementu wejściowego. Wiem, jak utworzyć niestandardową dyrektywę, ale w angularjs jest jakikolwiek sposób na określenie rozmiaru pliku wybranego elementu. Nie należy używać Jquery.sprawdź poprawność rozmiaru pliku przed przesłaniem dla typu wejścia = file using angularjs

JS kod:

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

Tak to jest możliwe , ale nie specyficzne dla Ang ular -http: //stackoverflow.com/questions/3717793/javascript-file-upload-size-validation. Możesz łatwo włączyć to do dyrektywy dotyczącej walidacji kątowej. – pixelbits

+0

A I: Czy możesz skonsolidować i dostarczyć rozwiązanie, które działało dla ciebie. Dzięki ! – PavanSandeep

Odpowiedz

7

Jak sprawdzić rozmiar pliku z dyrektywy:

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

non wersja 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

to działa. Ale wygląda na to, że używa jquery. Czy masz rozwiązanie, które nie używa jquery? –

+0

@ A.I zaktualizowałem plunkr, aby użyć wersji innej niż jquery –

+0

niesamowite! Takie podejście rozwiązuje teraz mój problem. –

Powiązane problemy