在上传之前验证AngularJs中的文件扩展名

Question

我正在将应用程序的图像上传到服务器.在将它们上传到服务器之前,是否有任何方法可以在将客户端提交到服务器之前验证客户端的扩展？

我正在使用AngularJs来处理我的前端.

Answer 1

您可以使用这个简单的JavaScript来验证.此代码应放在指令和更改文件上载控件中.

var extn = filename.split(".").pop();

或者你也可以使用javascript substring方法:

fileName.substr(fileName.lastIndexOf('.')+1)

Answer 2

你可以创建一个angular指令,这样的东西应该工作(更改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;
                });
           };
        }
    };
});

Answer 3

用于文件验证,即必需,文件扩展名,大小.创建自定义指令和使用的角度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;
        });
    }
  };
});

需要 angular-messages.min.js