Проверка расширения файла в AngularJs перед загрузкой
я загружаю изображения для нашего приложения на сервер. Есть ли способ проверить расширения на стороне клиента JS перед отправкой их на сервер перед их загрузкой на сервер?
Я использую AngularJs для обработки моего интерфейса.
6 ответов
вы можете использовать этот простой javascript для проверки. Этот код должен быть помещен в директиву и при изменении управления загрузкой файлов.
var extn = filename.split(".").pop();
в качестве альтернативы вы также можете использовать метод подстроки javascript:
fileName.substr(fileName.lastIndexOf('.')+1)
вы можете создать угловую директиву, что-то вроде этого должно работать (изменить принятые значения в массиве validFormats);
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;
});
};
}
};
});
для проверки файлов i.e требуются,расширение,в размере.Создайте пользовательскую директиву и используйте модуль angular js ng-message для упрощения ошибок проверки
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>
угловой 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;
});
}
};
});
требуются угловое-сообщения.минута.js
вот полный код для проверки расширения файла usign AngularJs
<!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>
вы можете добавить пользовательскую директиву, которая проверяет element.files
массив для проверки типа на onchange
событие.
Нет встроенной проверки для ввода файла.
загрузка файла с помощью AngularJS
есть много модулей, которые смогут помочь вам в этом. Любой из них должен позволить вам определить фильтр только для загрузки определенных расширений файлов.
Если вы ищете простое решение, вы можете использовать что-то вроде строку.js чтобы убедиться, что имена загружаемых файлов имеют расширение '.png'.