简体   繁体   English

如何使用Angular-js验证图像文件

[英]How to validate image File using Angular-js

am using angular-js for image file validation. 我使用angular-js进行图像文件验证。 i want to find out "is it image File or not"..here am compare the extension of file to identify the file is correct or not.. 我想找出“是图像文件与否”..这里比较文件的扩展名来识别文件是否正确..

but my code is not work!..it doesn't show any error. 但我的代码不起作用!它没有显示任何错误。 am literally confused 我真的很困惑

anyone have the answers command here!.. 任何人都有这里的答案命令!..

Thanks in advance! 提前致谢!

my Code is 我的代码是


<HTML>
 <HEAD>
  <TITLE>Validate image on upload</TITLE>
  <script src = "angular.min.js"></script>
  <body>
<center>
<div ng-app="prabhu"  ng-controller="mycontroller">


    Upload an image: <INPUT type="file" name="image_file" ng-model="fil.name">  
    //<h1>the file is {{val.validate())}}</h1>
 <p ng-bind="val.validate()"> <p>
 </div>
</center>
<script >

 var myapp = angular.module("prabhu",[]);
 myapp.controller("mycontroller",function($scope){

    $scope.val={            
        ref = ['jpg','jpeg','png'],         
        validate:function(){

            name = fil.name | lowercase;
            length = name.length();
            ext = name.LastIndexOf(".")+1;          
            ext1 = name.substring(ext,length);          
            //k = 0;            
            for (k=0 ; k <= 4;k++){
                if(ref[k]==ext1){
                    return "valid File Format";

                }
                //else
                //  return "invalid File Format";
            }           
            return "invalid File Format";
        }
    }; 
 });
 </script>
</BODY>

</HTML>

Working fiddle. 工作小提琴。

As far as I know, no binding support for File Upload control. 据我所知,没有对文件上传控件的绑定支持。

HTML: HTML:

    <input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage(this.files)" />       

In controller: 在控制器中:

$scope.uploadImage = function (files) {           
       var ext = files[0].name.match(/\.(.+)$/)[1];
       if(angular.lowercase(ext) ==='jpg' || angular.lowercase(ext) ==='jpeg' || angular.lowercase(ext) ==='png'){
        alert("Valid File Format");
       }  
       else{
        alert("Invalid File Format");
       }       
    }

my requirement is to select image files only!. 我的要求是只选择图像文件!

Try using accept attribute at input type="file" element 尝试在input type="file"元素中使用accept属性

 <input type="file" accept="image/*" /> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM