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!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
file input
- Thread starter bartee
- Start date
BillyRayPreachersSon
Programmer
While some browsers can tell the dimensions of an image client-side (using JavaScript), as steven290 says, you are better off doing this server-side for maximum compatibility.
The actual upload bit has to be done server-side, regardless... so you may as well do the whole lot server-side.
Hope this helps,
Dan
The answers you get are only as good as the information you give!
- Thread starter
- #4
BillyRayPreachersSon
Programmer
This works for me, client-side, to get the dimensions of an image:
It has been tested working in IE 6, FF 1, NN 7.1, and Opera 7.54. If you need to guarantee support in other browsers, you'd need to test it.
The string manipulation is a routine I copied from a post I wrote long ago:
The reason for it is:
1. I use .split(x).join
to do a quick search-and-replace of x with y... I hate writing regular expressions, especially ones that involve slashes...
2. I replace all \ with /, prepend file:///, escape the URL, and then assign to the source. IE spits the dummy if the : (as in C
is escaped, so the second search-and-replace puts it back in. NN and Opera don't seem to mind about this.
Hope this helps,
Dan
The answers you get are only as good as the information you give!
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;
}
}
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>It has been tested working in IE 6, FF 1, NN 7.1, and Opera 7.54. If you need to guarantee support in other browsers, you'd need to test it.
The string manipulation is a routine I copied from a post I wrote long ago:
The reason for it is:
1. I use .split(x).join
to do a quick search-and-replace of x with y... I hate writing regular expressions, especially ones that involve slashes...2. I replace all \ with /, prepend file:///, escape the URL, and then assign to the source. IE spits the dummy if the : (as in C
is escaped, so the second search-and-replace puts it back in. NN and Opera don't seem to mind about this.Hope this helps,
Dan
The answers you get are only as good as the information you give!
- Status
Similar threads
- Locked
- Question