Я загружаю изображения для нашего приложения на сервер. Есть ли способ проверить расширения на стороне клиента JS перед отправкой их на сервер перед их загрузкой на сервер?Проверка расширения файла в AngularJs перед загрузкой
Я использую AngularJs для обработки моего front-end.
Вы можете использовать этот простой javascript для проверки. Этот код должен быть помещен в директиву и при изменении управления загрузкой файлов.
var extn = filename.split(".").pop();
В качестве альтернативы вы можете использовать яваскрипт метод подстроки также:
fileName.substr(fileName.lastIndexOf('.')+1)
Вы можете добавить настраиваемую директиву, которая проверяет массив element.files, чтобы проверить тип на мероприятии onchange. Вложения файлов не встроены.
Есть много модулей, которые могут помочь вам в этом. Любой из них должен позволять вам определять фильтр только для загрузки определенных расширений файлов.
Если вы ищете более простое решение, вы можете использовать что-то вроде string.js, чтобы гарантировать, что файлы загружаемых файлов имеют расширение «.png».
Вы можете создать угловую директиву, то, как это должно работать (Изменить допустимые значения в массиве 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;
});
};
}
};
});
Это хорошее угловое решение. –
что использовать '+ 1' – runningmark
@runningmark Получает последний матч с точкой. И суммируйте 1 с этим значением, чтобы удалить точку вывода. В приведенном выше примере, если ваш файл имеет имя «someFile».someeirdname.rar "вы получите" rar "как значение' ext' – ecarrizo
для проверки файла т.е. требуется, расширения файла, размера .Create пользовательских директив и использовать угловой модуль нг-сообщение JS для упрощения проверочных ошибок
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;
});
}
};
});
Требовать angular-messages.min.js
Он отлично работает для проверки того, что если файл jpg, jpeg или png. Но когда ничего не выбрано, я получаю ошибку синтаксического анализа, как показано ниже: Пожалуйста, добавьте сообщение об ошибке для разбора. Для получения дополнительной информации смотрите этот образ: http://i66.tinypic.com/2ykz6t1.jpg – Vishal
Вот полный код для проверки расширения файла 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>
спасибо за короткий и точный ответ –
Пожалуйста, не забудьте отметить ответ, который вы нашли полезным – Matho