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!
- September 8, 2008
- article by Gabriel C.
- 3 comments
Sponsors
Related Posts
-
PHP: Check (validate) if the Uploaded File is an Imageat September 24, 2008 with 12 comments
-
Equivalent of PHP’s in_array() functionat September 13, 2008 with 4 comments
-
Powerful, Flexible, Simple to use Upload Tool: Pluploadat February 9, 2010
-
Show random image(s) from a directoryat September 21, 2008 with 3 comments
-
A PHP Contact Form with JavaScript Real Time Validationat April 30, 2009 with 18 comments



3 Replies to "Validating an image upload"
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); }October 3, 2008 at 3:39 AM
Thank you very much very nice code
Nice yaar!!good keep it up.
February 11, 2010 at 12:27 AM
/**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**/