Validating an image upload

Posted on September 8, 2008, Filled under JavaScript,  Bookmark it

Thanks for visiting our website! We regularly publish posts like this one. If you are interested in receiving the latest updates as soon as they are posted, please consider subscribing to the RSS feed or to our e-mail newsletter.

This is a useful JavaScript function which validates an image upload by checking the extension of the file that should be uploaded. If the extension is jpg, jpeg, png or gif it will return true. Otherwise, it will return false. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Validate image on upload @ BitRepository.com</TITLE>
  <META NAME="Author" CONTENT="Bit Repository">

  <META NAME="Keywords" CONTENT="validate, extensions, file, javascript">
  <META NAME="Description" CONTENT="A JavaScript Extension Validator for Images">

<SCRIPT LANGUAGE="JavaScript">

<!--
function validate()
{
var extensions = new Array("jpg","jpeg","gif","png","bmp");

/*
// Alternative way to create the array

var extensions = new Array();

extensions[1] = "jpg";
extensions[0] = "jpeg";
extensions[2] = "gif";
extensions[3] = "png";
extensions[4] = "bmp";
*/

var image_file = document.form.image_file.value;

var image_length = document.form.image_file.value.length;

var pos = image_file.lastIndexOf('.') + 1;

var ext = image_file.substring(pos, image_length);

var final_ext = ext.toLowerCase();

for (i = 0; i < extensions.length; i++)
{
    if(extensions[i] == final_ext)
    {
    return true;
    }
}

alert("You must upload an image file with one of the following extensions: "+ extensions.join(', ') +".");
return false;
}
 //-->

 </SCRIPT>

 </HEAD>

<BODY>

<center>

<form name="form" action="http://www.microsoft.com" enctype="multipart/form-data" method="post" onSubmit="return validate();">

<h2>Validate image on upload</h2>

<br />

	Upload an image: <INPUT type="file" name="image_file"> <input type="submit" name="submit" value="Submit">

</form>

</center>

</BODY>

</HTML>

NOTE: You can add more extensions to the validator by continuing the extensions array.

Good luck!


Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!

Get our RSS Feed!
  • September 8, 2008
  • article by Gabriel C.
  • 3 comments

Tags:

Validating an image upload

Sponsors

Related Posts

3 Replies to "Validating an image upload"

  1. Olle
    September 13, 2008 at 2:49 PM
    Reply

    Or you could just do:

    function validate()
{
return /\.(gif|jpe?g|png|bmp)$/i.test (document.form.image_file.value);
}
  2. aijaz
    October 3, 2008 at 3:39 AM
    Reply

    Thank you very much very nice code
    Nice yaar!!good keep it up.

  3. Saleem
    February 11, 2010 at 12:27 AM
    Reply

    /**Thanks boss.. I used some of ur logic but not the same.. If u r uploading multiple Image then its tedious to work with ur code.. if u need multiple image upload logic then mail to me “saleem2mail [at] gmail [ dot ] com” its works fine in all browsers**/

Leave a Reply


* = required fields

(will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


  

CommentLuv Enabled