Check image properties with Javascript

[Roger Withnell]

I browse for an image using form input type file and call a JavaScript
function with onchange.

I then want the function to check the image's properties (width, height,
filesize).

In WinIE, the following works:

var myimage = new Image();
myimage.src = fileID.value; // fileID is the form input type file ID, passed
to the function with getElementById( 'file')
alert(myimage.w idth); //gives the pixel width of the file (or height or
fileSize).

This does not work in Netscape or Safari.

How do obtain these properties in Netscape and Safari?

[RobG]

Re: Check image properties with Javascript

Roger Withnell wrote:[color=blue]
> I browse for an image using form input type file and call a JavaScript
> function with onchange.
>
> I then want the function to check the image's properties (width, height,
> filesize).[/color]

[snip][color=blue]
>
> How do obtain these properties in Netscape and Safari?
>
>[/color]

AFAIK, you can't. IE is the only browser that lets you do this,
other browsers only give you the attributes that are set. So if you
don't tell your new image what its height and width are, you can't
retrieve their values.


Cheers, Rob.

[Grant Wagner]

Re: Check image properties with Javascript

Roger Withnell wrote:
[color=blue]
> I browse for an image using form input type file and call a JavaScript
> function with onchange.
>
> I then want the function to check the image's properties (width, height,
> filesize).
>
> In WinIE, the following works:
>
> var myimage = new Image();
> myimage.src = fileID.value; // fileID is the form input type file ID, passed
> to the function with getElementById( 'file')
> alert(myimage.w idth); //gives the pixel width of the file (or height or
> fileSize).
>
> This does not work in Netscape or Safari.[/color]

You can't access an image's attributes milliseconds after you set it's SRC
attribute. The browser can't know what the dimensions of the image are until
it's (down)loaded the image, and that does not happen instantaneously .
[color=blue]
> How do obtain these properties in Netscape and Safari?[/color]

Use the browser's ability to inform you when the image is done (down)loading the
image using the image's -onload- event:

var myimage = new Image();
myimage.onload = function() {
alert(this.widt h);
}
myimage.onerror = function() {
alert('Image did not load!');
}
myimage.src = 'path/to/the/image';

You won't be able to obtain the image's -fileSize-, that attribute is only
available on a limited subset of browsers (possibly only IE, maybe a very few
others that attempt to mimic IE's abilities).

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq