AJAX

How to validate an image field with javascript

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2006

Posts: 12

Reputation: besart is an unknown quantity at this point

Solved Threads: 0

besart

Offline

Newbie Poster

How to validate an image field with javascript

May 29th, 2007

I need to validate three image fields with javascript so the user cant upload anything else expect files with image extensions.

A i also need to control the size of the image, for example to restrict user uploading files with greater size than 1MB.

Does this thing can be done?

Thanks.

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: How to validate an image field with javascript

May 29th, 2007

Are you sure you don't mean 'file' fields? input type="image" fields are just graphical submit buttons; input type="file" fields let a user pick a file on their filesystem to upload..

As for checking the file; you should be able to interogate the value of said file field, split it by slashes, and then split it by .:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
function getFileType(sValue)
{
  var aParts = sValue.split( "/" );
  var iParts = aParts.length;
  if( iParts >= 1 )
  {
    var sFile = aParts[ iParts - 1 ];
    var aFile = sFile.split( "." );
    if( aFile.length == 2 )
    {
      sName = aFile[0];
      sExt = aFile[1];
      alert("Filename is: "+sName+" extension is: "+sExt);
    }
    else
    {
      alert("Bad filespec; should have one dot between name and extension");
    }
  }
  else
  {
    alert("No file selected");
  }
}
</script>
</head>
<body>
<form>
<input type="file" id="file_input"/>
<span onclick="getFileType(document.getElementById('file_input').value);">GetFileType</span>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function getFileType(sValue)
{
  var aParts = sValue.split( "/" );
  var iParts = aParts.length;
  if( iParts >= 1 )
  {
    var sFile = aParts[ iParts - 1 ];
    var aFile = sFile.split( "." );
    if( aFile.length == 2 )
    {
      sName = aFile[0];
      sExt = aFile[1];
      alert("Filename is: "+sName+" extension is: "+sExt);
    }
    else
    {
      alert("Bad filespec; should have one dot between name and extension");
    }
  }
  else
  {
    alert("No file selected");
  }
}
</script>
</head>
<body>
<form>
<input type="file" id="file_input"/>
<span onclick="getFileType(document.getElementById('file_input').value);">GetFileType</span>
</form>
</body>
</html>

(this WONT validate a form; it will just show you how to get the file extension from a filespec in string format. post back if you have any problems integrating this with existing code...)

Tested on Firefox and Opera.

As for checking the size of the file; this certainly can't be done with JS. You have to write some server side code to handle the upload correctly. That is probably a better way to check the filetype aswell; by interogating the MIME type of an uploaded file rather than just assuming the extension indicates filetype.

Last edited by MattEvans; May 29th, 2007 at 10:02 am.

Plato forgot the nullahedron..

•

Join Date: Apr 2006

Posts: 12

Reputation: besart is an unknown quantity at this point

Solved Threads: 0

besart

Offline

Newbie Poster

Re: How to validate an image field with javascript

May 30th, 2007

Thanks a lot. Now I understand that only PHP can help me to solve my problem. Do you have any idea how this can be done?

•

Join Date: Jun 2006

Posts: 7,610

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 465

~s.o.s~

Offline

Failure as a human

Re: How to validate an image field with javascript

Jun 3rd, 2007

Just by validating the extension, you can't be sure that the file uploaded by the user is actually a image file. I can always rename an executable and make it seem like an image file, if your logic performs these kind of critical validations at the client side.

Better leave off these things to the server side validation. The size restriction as well as the type of file can only be meaningfully validated at the server. Doing it at the client side is a moot point.

I don't accept change; I don't deserve to live.