Need an image size control before upload

**QSDangKhoa** · 09-15-2006, 03:45 AM

Currently, i want to upload an image, before upload i want to check image dimension with the path in the file upload control value use javascript. My code below:

function getImgSize(imgSrc)
{
var newImg = new Image();
imgSrc="file://"+imgSrc;
newImg.src =imgSrc;
var height = newImg.height;
var width = newImg.width;
alert ('The image size is '+width+'*'+height);
}

The code get image size:
getImgSize(document.forname.file_upload_name.value);

in IE it's ok, but in firefox it's not ok.
Please help me.

**jscheuer1** · 09-15-2006, 09:04 PM

I don't think that you can do that client-side in FireFox. This will work, locally:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getImgSize(imgSrc, flag){
if(!flag){
var newImg = new Image();
imgSrc="file://localhost/"+imgSrc;
newImg.src =imgSrc;
}
else
var newImg = imgSrc
if (typeof newImg.complete=='boolean'&&(newImg.complete&&newImg.height*1>0)){
var height = newImg.height;
var width = newImg.width;
alert ('The image size is '+width+'*'+height);
}
else if (typeof newImg.complete=='boolean'){
alert('having trouble')
setTimeout(function(){getImgSize(newImg,'x')}, 3000);
}
else alert('Image cannot be evaluated for size');
}
</script>
</head>
<body>
<input type="file" onchange="getImgSize(this.value)">
</body>
</html>

But, when made live, FireFox simply will not load the client image. It will not even load it if it is hard coded into the page as the src attribute of an image tag, ex:

HTML Code:

<img src="file://localhost/c:/somedir/some.jpg">

What you are looking for is routinely done server-side. You should look into that.

**ItsMeOnly** · 09-15-2006, 09:08 PM

well, as on other groups mentioned: you can get the script working in Moz/FF- yet you'll be given these properties NOT UNTIL the image has fully loaded.

**jscheuer1** · 09-15-2006, 09:32 PM

Originally Posted by ItsMeOnly

well, as on other groups mentioned: you can get the script working in Moz/FF- yet you'll be given these properties NOT UNTIL the image has fully loaded.

When a page such as this is remotely hosted though, the client's image never gets loaded in FF 1.5.0.6. The script already times out to recheck, giving the browser every opportunity to load the image. This makes it so that eventually the browser can get the dimensions locally but, when hosted remotely, it never will load the image. The onload event below will never fire in FireFox if the page is remotely hosted, even if the image file is in the location given in the src attribute on the client machine:

HTML Code:

<img src="file://localhost/c:/somedir/some.jpg" onload="alert('here')">

**ItsMeOnly** · 09-15-2006, 09:45 PM

that's true, but people figured out that they can check... in loop, apparently it works

**jscheuer1** · 09-15-2006, 10:10 PM

Originally Posted by ItsMeOnly

that's true, but people figured out that they can check... in loop, apparently it works

Not for a remotely hosted page checking in a loop for a client hosted image in FF. You will loop forever, the image will never load, period - it is already on the client's HD, no need to cache it or to determine its size - at least as far a FF is concerned. And there is something else at work, a safegaurd for designers. If the image is uploaded first and tested in its new location or if it already exists on the web, that is a different matter. Then looping is the way to go.

Go back to this example:

HTML Code:

<img src="file://localhost/c:/somedir/some.jpg">

You will never even see this image if the page is remote.

Thread: Need an image size control before upload

Thread Tools

Search Thread

Need an image size control before upload

Bookmarks

Bookmarks

Posting Permissions