angularjs show Verstecken basierend auf Dateierweiterung der Dateieingabe

Question

Wer weiß, wie man eine Dateierweiterung bei einer Dateieingabe überprüft und ein div basierend auf dem Dateityp anzeigt. Ich muss verschiedene Upload-Optionen basierend auf der hochgeladenen Datei angeben. Der Text fragt nach einem Eingabetyp oder zip zeigt eine alternative Unterteilung an.

Answer 1

Verwenden Sie diese answer aus einer anderen Frage, achten Sie auf Änderungen an der Dateieingabe. Holen Sie den Dateityp, fügen Sie ihn zum Geltungsbereich hinzu und verwenden Sie dann ng-show/ng-if, um das/die richtige (n) Element (e) anzuzeigen/auszublenden.

var app = angular.module("app", []); 
 

 
app.controller("controller", function($scope) { 
 
    $scope.file = {}; 
 
    $scope.fileType = ""; 
 
    
 
    $scope.uploadFile = function() { 
 
    $scope.fileType = $scope.file.name.substring($scope.file.name.lastIndexOf(".") + 1); 
 
    }; 
 
}); 
 

 
// See https://stackoverflow.com/a/24085688/3894163 
 
app.directive('file', function() { 
 
    return { 
 
     require:"ngModel", 
 
     restrict: 'A', 
 
     link: function($scope, el, attrs, ngModel){ 
 
      el.bind('change', function(event){ 
 
       var files = event.target.files; 
 
       var file = files[0]; 
 

 
       ngModel.$setViewValue(file); 
 
       $scope.$apply(); 
 
      }); 
 
     } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="controller"> 
 

 
    <input data-file ng-model="file" type="file" ng-change="uploadFile()" /> 
 
    
 
    File type: {{fileType}} 
 
    
 
    <div ng-show="fileType === 'txt'"> 
 
    TXT 
 
    </div> 
 

 
    <div ng-show="fileType === 'pdf'"> 
 
    PDF 
 
    </div> 
 

 
    <div ng-show="fileType === 'png'"> 
 
    PNG 
 
    </div> 
 
    
 
    <div ng-show="fileType === 'jpg'"> 
 
    JPG 
 
    </div> 
 
    
 
    <div ng-show="fileType === 'docx'"> 
 
    DOCX 
 
    </div> 
 
    
 
</div>