Ich lade Bilder für unsere Anwendung auf den Server hoch. Gibt es eine Möglichkeit, die Erweiterungen auf der Clientseite durch JS zu überprüfen, bevor Sie sie an den Server senden, bevor Sie sie auf den Server hochladen?Validierung der Dateierweiterung in AngularJs vor dem Hochladen
Ich benutze AngularJs, um mein Front-End zu behandeln.
Sie können dieses einfache Javascript zur Validierung verwenden. Dieser Code sollte in eine Direktive und in eine Änderung der Datei-Upload-Kontrolle eingefügt werden.
var extn = filename.split(".").pop();
Alternativ können Sie Javascript Teilzeichenfolge Methode auch verwenden:
fileName.substr(fileName.lastIndexOf('.')+1)
Sie können eine benutzerdefinierte Direktive hinzufügen, die nach dem Array sucht, um den Typ des Ereignisses onchange zu überprüfen. Es gibt keine eingebettete Validierung für die Dateieingabe.
Es gibt viele Module, die Ihnen dabei helfen können. Mit jeder dieser Optionen können Sie einen Filter definieren, um nur bestimmte Dateierweiterungen hochzuladen.
Wenn Sie nach einer einfacheren Lösung suchen, können Sie etwas wie string.js verwenden, um sicherzustellen, dass die Dateinamen der hochgeladenen Dateien die Erweiterung '.png' haben.
Sie können eine Winkel Richtlinie erstellen, so etwas wie dies funktionieren sollte (die akzeptierten Werte in der validFormats Array ändern);
HTML:
<form name='fileForm' >
<input type="file" name="file" ng-model="fileForm.file" validfile>
</form>
Javascript:
angular.module('appname').directive('validfile', function validFile() {
var validFormats = ['jpg', 'gif'];
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
ctrl.$validators.validFile = function() {
elem.on('change', function() {
var value = elem.val(),
ext = value.substring(value.lastIndexOf('.') + 1).toLowerCase();
return validFormats.indexOf(ext) !== -1;
});
};
}
};
});
Es ist eine gute eckige Lösung. –
Was ist die Verwendung von '+ 1' – runningmark
@runningmark Es wird die letzte Übereinstimmung mit einem Punkt erhalten. Und summiere 1 zu diesem Wert, um den Punkt der Ausgabe zu entfernen. Im obigen Beispiel, wenn Ihre Datei nach 'someFile' benannt ist.someweirdname.rar "Du wirst" rar "als" ext "Wert bekommen – ecarrizo
für Dateiüberprüfung, dh erforderlich, Dateierweiterung, Größe .Create benutzerdefinierte Richtlinie und verwendet Winkel js ng-Nachrichtenmodul zur Vereinfachung der Validierungsfehler
HTML
<input type="file" ng-model="imageFile" name="imageFile" valid-file required>
<div ng-messages="{FORMNAME}.imageFile.$error" ng-if="{FORMNAME}.imageFile.$touched">
<p ng-message="required">This field is required</p>
<p ng-message="extension">Invalid Image</p>
</div>
Angular JS
customApp.directive('validFile', function() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ngModel) {
var validFormats = ['jpg','jpeg','png'];
elem.bind('change', function() {
validImage(false);
scope.$apply(function() {
ngModel.$render();
});
});
ngModel.$render = function() {
ngModel.$setViewValue(elem.val());
};
function validImage(bool) {
ngModel.$setValidity('extension', bool);
}
ngModel.$parsers.push(function(value) {
var ext = value.substr(value.lastIndexOf('.')+1);
if(ext=='') return;
if(validFormats.indexOf(ext) == -1){
return value;
}
validImage(true);
return value;
});
}
};
});
erforderlich ist angular-messages.min.js
Es funktioniert gut für die Validierung, wenn eine Datei jpg, jpeg ist oder png. Aber wenn nichts ausgewählt ist, bekomme ich einen Parse-Fehler wie unten: Bitte fügen Sie eine Fehlermeldung für die Analyse hinzu. Für weitere Details schauen Sie sich dieses Bild an: http://i66.tinypic.com/2ykz6t1.jpg – Vishal
die komplette Code Dateierweiterung usign AngularJS für die Validierung
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type='text/javascript'>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.setFile = function(element) {
$scope.$apply(function($scope) {
$scope.theFile = element.files[0];
$scope.FileMessage = '';
var filename = $scope.theFile.name;
console.log(filename.length)
var index = filename.lastIndexOf(".");
var strsubstring = filename.substring(index, filename.length);
if (strsubstring == '.pdf' || strsubstring == '.doc' || strsubstring == '.xls' || strsubstring == '.png' || strsubstring == '.jpeg' || strsubstring == '.png' || strsubstring == '.gif')
{
console.log('File Uploaded sucessfully');
}
else {
$scope.theFile = '';
$scope.FileMessage = 'please upload correct File Name, File extension should be .pdf, .doc or .xls';
}
});
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="file"
onchange="angular.element(this).scope().setFile(this)">
{{theFile.name}}
{{FileMessage}}
</div>
</body>
</html>
danke für kurze und genaue Antwort –
Bitte denken Sie daran, die Antwort zu markieren, die Sie nützlich fanden – Matho