【发布时间】：2015-06-29 00:05:34
【问题描述】：
我正在将我们的应用程序的图像上传到服务器。 有什么方法可以在将扩展上传到服务器之前通过 JS 验证客户端的扩展，然后再将它们提交到服务器？
我正在使用 AngularJs 来处理我的前端。
【问题讨论】：
标签： javascript angularjs frontend image-uploading
【发布时间】：2015-06-29 00:05:34
【问题描述】：
您可以使用这个简单的 javascript 来验证。这段代码应该放在一个指令中，并在文件上传控制发生变化时。
var extn = filename.split(".").pop();
您也可以使用 javascript 子字符串方法：
fileName.substr(fileName.lastIndexOf('.')+1)
【讨论】：
-
扩展很容易操作。例如：创建一个图像（比如 png），然后将扩展名更改为 .xlsx。图片以
.xlsx的身份上传到服务器对于这个问题，答案是正确的，但实际上没有用 -
我不明白你的问题？您希望从文件名和扩展名中获得什么样的实际用途？
您可以创建一个角度指令，这样的东西应该可以工作（更改 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 它得到最后一个带点的匹配。并将 1 与该值相加，以删除输出的点。在上面的示例中，如果您的文件以“someFile.someweirdname.rar”命名，您将得到“rar”为
ext值 -
当我使用这个指令时，validFile: true 总是在 $pending... @ecarrizo
用于文件验证，即必需、文件扩展名、大小。创建自定义指令并使用 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>
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;
});
}
};
});
【讨论】：
-
它可以很好地验证文件是 jpg、jpeg 还是 png。但是当没有选择任何内容时，我会收到如下解析错误：请添加错误消息以进行解析。有关更多详细信息，请查看此图片：i66.tinypic.com/2ykz6t1.jpg
-
扩展验证对我使用相同的代码有效，但 required 不起作用，尽管它显示解析错误。任何人都可以提供在此获得相同所需的任何更改。
这里是验证文件扩展名 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 事件的类型。
文件输入没有嵌入式验证。
【讨论】：
-
请记得标记您认为有用的答案
有许多模块可以帮助您解决这个问题。其中任何一个都应允许您定义过滤器以仅上传某些文件扩展名。
如果您正在寻找更简单的解决方案，您可以使用string.js 之类的内容来确保上传文件的文件名具有扩展名“.png”。
【讨论】：