Validating an image upload

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

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!

September 8, 2008
article by Gabriel C.
4 comments

Tags: validate

PHP: Check (validate) if the Uploaded File is an Image
at September 24, 2008 with 18 comments
Equivalent of PHP’s in_array() function
at September 13, 2008 with 6 comments
jQuery File Upload Plugin: non-Flash Extensible File Uploader
at March 21, 2011
Powerful, Flexible, Simple to use Upload Tool: Plupload
at February 9, 2010
Show random image(s) from a directory
at September 21, 2008 with 6 comments

4 Replies to "Validating an image upload"

Olle
September 13, 2008 at 2:49 PM

Or you could just do:

function validate()
{
return /\.(gif|jpe?g|png|bmp)$/i.test (document.form.image_file.value);
}

aijaz
October 3, 2008 at 3:39 AM

Reply

Thank you very much very nice code
Nice yaar!!good keep it up.
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**/
Gaurav
August 27, 2010 at 10:20 PM

Reply

Thanks, nice code. This code solves my problem very quickly.

* = required fields

Validating an image upload

Related Posts

4 Replies to "Validating an image upload"

Leave a Reply

Tag Cloud

Menu

To do

Suggestions

Resources