Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript validation for only particular image formats

    HI all im santosh
    new to the javascript
    i need a validation code which takes only the image formats like jpeg,gif,jpg etc .
    That is when i click on browse and try to save the file which is in any other format other than that i mentioned above i should get an alert message
    please help me out
    thanx in advance
    bye
    santosh

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your question is not very clear...
    What do you mean Browse too and then Save?
    I would assume if they could browse to it... it has already been saved...

    But you can try something like this to check if the file which was browsed to is indeed an image...

    Code:
    <html>
    <head>
    <title>File System Object Image Check</title>
    <script type="text/javascript">
     <!--//
      function getFile(file){
       var fObj = new ActiveXObject("Scripting.FileSystemObject");
       var form = document.forms['form'];
    
        if(fObj.GetFile(file).Type.match(/image/gi)){
         var image = new Image();
             image.src = file;
             form.size.value = fObj.GetFile(file).Size+' Bytes';
             form.type.value = fObj.GetFile(file).Type;
             form.width.value = image.width+' px'; 
             form.height.value = image.height+' px';       
        }    
    
        else{ 
          for(var i=0; i<form.elements.length; i++){
             form.elements[i].value = '';
          }  alert('Please choose an image!!');
        }
      }
     //-->
    </script>
    </HEAD>
    
    <BODY>
    <b>Select an Image File to check:</b>
    <form name="form">
    <input type="file" name="file" onchange="getFile(this.value)"><br>
    <input type="text" name="size"> : SIZE<br>
    <input type="text" name="type"> : TYPE<br>
    <input type="text" name="width"> : WIDTH<br>
    <input type="text" name="height"> : HEIGHT<br>
    </form>
    </body>
    </html>
    .....Willy

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Maybe he meant that if the user chooses a non-image file and clicks the Save button to submit the page, an alert will show.
    Code:
    <html>
    <head>
    <script type="text/javascript">
      function validate(oForm){
        if (!/(\.(gif|jpg|jpeg|bmp|png))$/i.test(oForm.file1.value)){
           alert("Please attach an image.");
           oForm.file1.focus();
           return false;
        }
        return true;
      }
    </script>
    </head>
    <body>
    <form name="uploadForm" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return validate(this)" />
    <input type="file" name="file1" />
    <input type="submit" value="Save" />
    </form>
    </body>
    </html>
    NOTE: Don't forget to always validate on the server-side as javascript can be disabled or bypassed.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •