angularjsファイル入力のファイル拡張子に基づいて表示を隠す

Question

ファイル入力のファイル拡張子をチェックし、ファイルタイプに基づいてdivを表示する方法は誰でも知っています。私はアップロードされるファイルに基づいて異なるアップロードオプションを与える必要があります。テキストは入力タイプを要求しますが、zipは代替部門を示します。

Answer 1

別の質問のanswerを使用すると、ファイル入力の変更を監視します。ファイルの種類を取得し、スコープに追加して、正しい要素を表示/非表示にするには、ng-show/ng-ifを使用します。

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>