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.angularjs show Verstecken basierend auf Dateierweiterung der Dateieingabe
0
A
Antwort
0
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>
Sie meinen andere als die Dateien Array des input [type = "file"] ?? –