Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Detecting the dimensions of an image client-side

Graphics Display

Detecting the dimensions of an image client-side

by  BillyRayPreachersSon  Posted    (Edited  )
This code will let you detect the size of an image client-side. It has been tested working in IE 6, FF 1, NN 7.1, and Opera 7.54.

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		var tempImage;

		function showDimensions() {
			var imageName = document.forms[0].elements['myFile'].value;
			if (imageName != '') {
				imageName = 'file:///' + escape(imageName.split('\\').join('/'));
				imageName = imageName.split('%3A').join(':');

				tempImage = new Image();
				tempImage.onload = getDimensions;
				tempImage.src = imageName + '?randParam=' + new Date().getTime();
				// append a timestamp to avoid caching issues - which happen if you overwrite any image with one of different dimensions, and try to get the dimensions again
				// even with cache settings to max, in both ff and ie!
			}
		}

		function getDimensions() {
			alert(tempImage.width + ' x ' + tempImage.height);
		}
	//-->
	</script>
</head>

<body>
	<form>
		<input type="file" name="myFile" />
		<br />
		<input type="button" value="Show dimensions" onclick="showDimensions();" />
	</form>
</body>
</html>

Dan


[link http://www.coedit.co.uk/][color #00486F]Coedit Limited[/color][/link][color #000000] - Delivering standards compliant, accessible web solutions[/color]

[tt]Dan's Page [blue]@[/blue] Code Couch
http://www.codecouch.com/dan/[/tt]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top