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.
