Tuesday, April 28, 2009

How to check upload file extension (JavaScript)

Before uploading a file it's a good idea to check for valid file extensions you want.
Even though you can easily bypass JavaScript validation by disabling JavaScript in the browser, you can prevent genuine user errors by implementing this code.


<html>
<head>
<title>Upload Check</title>
<script type="text/javascript">

function vali_type()
{ 
 var id_value = document.getElementById('up').value;
 
 if(id_value != '')
 { 
  var valid_extensions = /(.jpg|.jpeg|.gif)$/i;   
  if(valid_extensions.test(id_value))
  { 
   alert('OK');
  }
  else
  {
   alert('Invalid File')
  }
 } 
}


</script>
</head>

<body>

<input type="file" name="up" id="up"
onBlur="vali_type()" />

</body>
</html>



var valid_extensions = /(.jpg|.jpeg|.gif)$/i;
Check for .jpg, .jpeg and .gif file extentions in the end of the string
| - OR
i - Case Insensitive
$ - END
at
Labels: ,

15 comments:

  1. UnknownDecember 16, 2009 at 4:28 AM

    thanks you

    ReplyDelete
  2. EmSmithMay 25, 2010 at 10:38 AM

    Thanks for sharing, it came in very handy for a file upload I was doing.

    ReplyDelete
  3. AnonymousOctober 5, 2011 at 2:19 PM

    Thanks, it made my job very easy..:)

    Thank you so much...

    ReplyDelete
  4. AnonymousNovember 30, 2011 at 7:12 PM

    Thanks, although I wonder why you have .test in this line?

    if(valid_extensions.test(id_value))

    where does it come from?

    ReplyDelete
  5. my nodeDecember 1, 2011 at 12:00 AM

    .test() is the method that used to do the regex validation.

    http://www.w3schools.com/jsref/jsref_regexp_test.asp

    ReplyDelete
  6. Meher BalaDecember 15, 2011 at 11:38 AM

    Thanks for sharing this information.

    ReplyDelete
  7. AnilFebruary 16, 2012 at 12:09 PM

    Nice post

    ReplyDelete
  8. AnonymousJuly 5, 2012 at 4:55 PM

    Hey what if there is a table instead of a text box and if we had to get the value from the columns how can we do it?

    ReplyDelete
  9. krishnaAugust 17, 2012 at 4:41 PM

    nice sir

    ReplyDelete
  10. AnonymousSeptember 13, 2012 at 9:40 AM

    Good One

    ReplyDelete
  11. HannesOctober 9, 2012 at 6:51 PM

    Hey there, this helped me with a similar problem, only 1 comment though, it should be /(\.jpg|\.jpeg|\.gif)$/i else it will return true if the filename contains jpg in the name, even if the extension is pdf or whatever :)

    ReplyDelete
  12. AnonymousMay 30, 2013 at 5:02 PM

    nice post. many thanks

    ReplyDelete
  13. AnonymousAugust 30, 2013 at 11:28 AM

    thanks mate...nice one

    ReplyDelete
  14. AnonymousNovember 12, 2013 at 7:49 AM

    $/i wats the purpose

    ReplyDelete

Subscribe to: Post Comments (Atom)