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.
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.
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?
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 have same problem how can i restrict user from loading an not more than some specified size.Any one can help me
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.