...

View Full Version : How 2 get dimensions of a JPG file



Yovav
10-26-2003, 11:30 AM
Dear all.

How can I get the dimensions (width & height) from a JPG file using ASP ?

for example: the user uploads a JPG file to my server and I want to only accept it if it is in the size of 800x600
(can I do it using JavaScript before it uploads ?)

Thanks in advanced, Yovav.

Mhtml
10-26-2003, 01:44 PM
As far as I know this cannot be done client side like that. Why not use ASP for it?

Willy Duitt
10-26-2003, 07:45 PM
You can easily find the height and width of an image using
javascript. I don't know anything about ASP. Maybe you will
have better luck if this question was moved to that forum.

But in javascript you would do something like this:

<body>
<img src="http://THE_IMAGE_FILE.jpg">
<br>
<script type="text/javascript">
wdt=document.images[0].width;
ht=document.images[0].height;
sc=document.images[0].src;
document.write('width='+wdt+' height='+ht);
</script>

.....Willy

Yovav
10-26-2003, 10:21 PM
Maybe I found something:
http://www.asp101.com/forum/display_message.asp?mid=105372

but it only check the picture after it was uploaded...

+

1. How can I resize a picture - on the client or on the server ?
(but keep it look good and smooth...)

2. is there a way I can check the size of the picture before the user uploads it,
so I don't have to upload pictures that are not in the alowed size ?

adios
10-27-2003, 03:19 AM
Haven't really tested this, so...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function check_img(img_file)
{
var testObj = new Image();
testObj.onload = function()
{
report(this);
}
testObj.src = img_file;
}

function report(testObj)
{
if (testObj.width != 800 || testObj.height != 600)
{
alert('That image is not 800 x 600, the required size. Please choose another.');
document.forms[0].image_url.select();
return false;
}
else return true;
}

</script>
</head>
<body>
<form action="javascript&#58;alert('sent')" method="post" enctype="multipart/form-data">
<input type="file" name="image_url" onblur="return check_img(this.value)">
</form>
</body>
</html>

Yovav
10-27-2003, 04:06 AM
Hay 10X man!

it does work and recognize the size,

Now I only have 2 figure out how to change the action=""
to the correct ASP page if size is good,
and to allow only some picture extentions (JPG, JPEG, GIF, PNG)

do U have an idea how 2 do this 2 ?

+

can I also get the file size before uploading it ?


Anyway, Thanks for this amazing code :-)

adios
10-27-2003, 04:50 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function check_img(oInput)
{
if (oInput.value != '' && !/\.(JPG|JPEG|GIF|PNG)$/i.test(oInput.value))
{
var sMsg = '';
var badtype = oInput.value.match(/\.\w+$/i);
if (badtype == null)
sMsg += 'Invalid file type.';
else sMsg += 'You have selected an image file of type "' + badtype + '" to upload.';
sMsg += '\nOnly the following file types are permitted:';
sMsg += '\n\n\t.JPG\n\t.JPEG\n\t.GIF\n\t.PNG\n\nThank you.';
alert(sMsg);
oInput.select();
return false;
}
var testObj = new Image();
testObj.onload = function()
{
report(this);
}
testObj.src = oInput.value;
}

function report(testObj)
{
if (testObj.width != 800 || testObj.height != 600)
{
alert('That image is not 800 x 600, the required size. Please choose another.');
document.forms[0].image_url.select();
return false;
}
else return true;
}

</script>
</head>
<body>
<form action="javascript&#58;alert('sent')" method="post" enctype="multipart/form-data">
<input type="file" name="image_url" onchange="return check_img(this)">
</form>
</body>
</html>

Programming file input controls is iffy; never know what to expect. Tested mozilla Firebird/NS7, IE6. Might want to shop it around a bit. The javascript&#58; url is strictly for demo; put a real action in ther when using. File size is iffy as well; possibly activeX...

http://www.faqts.com/knowledge_base/view.phtml/aid/1685/fid/1

Yovav
10-27-2003, 06:39 AM
Thanks !!!

REAL great stuff :-)

U left me with no more questions (4 now :-)

Yovav
10-27-2003, 06:44 AM
I do have another one (while U R hot...)


do U know if I can also show the image (from the client) as a preview - before sending it ?
(maybe using the picture object some how)


I think I saw it somewhere but I can't remember where :-(

glenngv
10-27-2003, 07:57 AM
try a combination of these:
http://www.codingforums.com/showthread.php?s=&threadid=8500
http://www.codingforums.com/showthread.php?s=&threadid=26677

Roy Sinclair
10-27-2003, 07:37 PM
One warning: even if you implement a "client side" script like this to prevent users from uploading oversize images you still need a server side script to perform the same check. The "client side" script's purpose is to help the user check the image before they spend the extra time required to submit it while the server side script's purpose is to catch the same thing if a user has javascript turned off or is deliberately trying to bypass the client side size check.

Yovav
10-28-2003, 01:30 AM
Originally posted by Roy Sinclair
One warning: even if you implement a "client side" script like this to prevent users from uploading oversize images you still need a server side script to perform the same check. The "client side" script's purpose is to help the user check the image before they spend the extra time required to submit it while the server side script's purpose is to catch the same thing if a user has javascript turned off or is deliberately trying to bypass the client side size check.


Absolutely agreed.

10Q All 4 the great info...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum