Checking image size

[Antonie C Malan Snr]

Dear All,

I tried posting this before, but it seems to have disappeared.

I need to check image sizes before the user uploads them. This works in
the Mozilla family on second and subsequent iterations:

if(form.photo1.value != ""){
var piccie = new Image();
piccie.src = "file://" + form.photo1.value;
if(piccie.height > 244 || piccie.height < 236 || piccie.width > 324
|| piccie.width < 316){
alert("Your photo 1 is " + piccie.width + " pixels wide and " +
piccie.height + " pixels high.\n The required dimensions are 320w
x 240h. Please scale your picture");
return false;
}
}

This means the user must try twice on the Mozilla family of browsers.
The first time a hight and width of 0 are returned.

On Opera it does not work at all. The "file://" is needed when this
runs on the server.

I don't know about MSIE as I don't have a server setup on the Windows
side of my computer and very rarely go there.

Any ideas on this? I'd be grateful.

Chris

 

[Grant Wagner]

I need to check image sizes before the user uploads them. This works in
the Mozilla family on second and subsequent iterations:

if(form.photo1.value != ""){
var piccie = new Image();
piccie.src = "file://" + form.photo1.value;

At this point in your code, piccie will not have loaded yet. It's height and width attributes could be
anything from 0 to undefined to some random value.

if(piccie.height > 244 || piccie.height < 236 || piccie.width > 324
|| piccie.width < 316){
alert("Your photo 1 is " + piccie.width + " pixels wide and " +
piccie.height + " pixels high.\n The required dimensions are 320w
x 240h. Please scale your picture");
return false;
}
}

This means the user must try twice on the Mozilla family of browsers.
The first time a hight and width of 0 are returned.

Because in Gecko-based browsers, the height and width attributes are the value of the previous image,
in your case, there is no previous image, so height and width are 0.

On Opera it does not work at all. The "file://" is needed when this
runs on the server.

No, it really isn't. If it's coming from a Web server, then you either don't need the protocol at all,
or it should be http:

Oh I see what you are doing, you are trying to determine the size of an image a user has selected?

You simply can not do that in a Web browser in the default security environment. It would require
having access to the local file system, and you do not have access to the local file system.

It happens to work in Mozilla because the entire page is coming from the local file system, so the
script on the page assumes the image is just loading from the same source as the rest of the page.

I don't know about MSIE as I don't have a server setup on the Windows
side of my computer and very rarely go there.

Internet Explorer has nothing to do with having a Web server set up. It is a Web browser.

Any ideas on this? I'd be grateful.

Yes, what you are atttempting to do - determine the dimensions of an image that has not been uploaded
to the server - using client-side JavaScript in the default security environment is impossible.

You will have to allow the user to upload the image, and then determine the dimensions on the server.