在上传前通过AngularJs验证文件扩展名

Question

在上传前通过AngularJs验证文件扩展名

javascriptangularjsfrontendimage-uploading

15

我正在将应用程序的图像上传到服务器。在将它们上传到服务器之前，是否有任何方法可以通过JS在客户端验证扩展名?

我正在使用AngularJs处理我的前端。

- Ali Saberi

6个回答

12

你可以创建一个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;
                });
           };
        }
    };
});

- ecarrizo

+ 1的用途是什么？ - runningmark

@runningmark 它获取最后一个点匹配项。并将1加到该值，以便从输出中删除点。在上面的示例中，如果您的文件命名为“someFile.someweirdname.rar”，则将获得“rar”作为ext值。 - ecarrizo

1

当我使用这个指令时，validFile: true总是在$pending内... @ecarrizo - Marko Mikulić

5

为了进行文件验证，例如必填项、文件扩展名、大小等。创建自定义指令并使用AngularJS的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;
        });
    }
  };
});

Require angular-messages.min.js

- Aniket Muruskar

它可以很好地验证文件是否为jpg、jpeg或png。但是当没有选择任何文件时，我会收到以下解析错误：请添加解析错误消息。有关更多详细信息，请查看此图像：http://i66.tinypic.com/2ykz6t1.jpg - Vishal

扩展验证对我来说是有效的，使用相同的代码，但必需的验证不起作用，尽管它显示解析错误。有人能提供所需的更改以获得相同的结果吗？ - Shilpi Jaiswal

1

这是使用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>

- Shakeer Hussain

0

您可以添加自定义指令，以检查element.files数组，以便在onchange事件上检查类型。文件输入没有嵌入式验证。

- Matias Fernandez Martinez

请记得标记你认为有用的答案。 - Matias Fernandez Martinez

0

使用 AngularJS 进行文件上传

有很多模块可以帮助你实现这个功能。其中任何一个都应该允许你定义一个过滤器，以便只上传特定的文件扩展名。

如果你正在寻找一个更简单的解决方案，你可以使用类似 string.js 这样的工具来确保被上传的文件的文件名是 '.png' 扩展名。

- jcc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sanjeev Singh · Accepted Answer

您可以使用这个简单的JavaScript代码进行验证。这段代码应该放在一个指令内，并在文件上传控件的更改时执行。

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

你也可以使用 JavaScript 的 substring 方法：

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