User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 392,083 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,942 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 4043 | Replies: 3
Reply
Join Date: Apr 2006
Location: Prishtina
Posts: 12
Reputation: besart is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
besart besart is offline Offline
Newbie Poster

How to validate an image field with javascript

  #1  
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.
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Jul 2006
Location: Deptford, London
Posts: 936
Reputation: MattEvans has a spectacular aura about MattEvans has a spectacular aura about 
Rep Power: 5
Solved Threads: 47
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Posting Shark

Re: How to validate an image field with javascript

  #2  
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 .:
<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 9:02 am.
If it only works in Internet Explorer; it doesn't work.
Reply With Quote  
Join Date: Apr 2006
Location: Prishtina
Posts: 12
Reputation: besart is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
besart besart is offline Offline
Newbie Poster

Re: How to validate an image field with javascript

  #3  
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?
Reply With Quote  
Join Date: Jun 2006
Location: India
Posts: 6,775
Reputation: ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold 
Rep Power: 23
Solved Threads: 330
Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Rebellion Revamped

Re: How to validate an image field with javascript

  #4  
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."

"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb JavaScript / DHTML / AJAX Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

All times are GMT -4. The time now is 12:26 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC