angularjs根据文件输入的文件扩展名显示隐藏

Question

任何人都知道如何检查文件输入上的文件扩展名并根据文件类型显示div。我需要根据上传的文件提供不同的上传选项。它的文本要求输入类型或zip显示替代分区。

Answer 1

在其他问题中使用此answer，请注意文件输入的更改。获取文件的类型，将其添加到范围，然后使用ng-show / ng-if显示/隐藏正确的元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;