When somebody uploads an image, I want a thumbnail of it displayed. I figured I would have javascript read the location of the image, then resize it down to a thumbnail. I only problem is, how do you get the width and height of an image so I can shrink it without distortion. Also, how do you read the value of a file input field?

If you specify only the image's WIDTH or HEIGHT the browser should calculate the missing one automatically.

To get the file INPUT field's value you might simply use onchange="this.value" but that only seems to work well in IE/win. Other browsers (and OS) probably get problems with their different file paths.

--------

The fundamental issue seems to be to let users see which image they've selected for upload. Since images can be previewed in Windows Explorer, why not let the user upload files through Explorer's FTP functionality instead of through a form? But maybe that creates other problems.

Hi there

If you are using PHP it is fairly simple to resize an image using the GD library.

I can expand on this if required

cheers

Sparky

PHP also contains the getimagesize() function. But if I understood the OP correctly, he wants to let users preview images before they are uploaded.

Another idea might be to offer an online preview, where the user has the chance of deleting his newly uploaded file.

Yep your right christian, it was getting late for me

Why should one wanted to do that? There's View->Thumbnails in Windows...

Javascript has no access to the file system. Until the visitor commits to sending you the file, you can't see it, for obvious security reasons. Before the visitor sends it, it's up to the visitor to arrange whatever mechanism to preview the images to send. (Of course you could write a Doze application to do this and offer it for download if you wish.)

Once the file has been uploaded, it only makes sense to resize it on the server, and show a confirmation page with a thumbnail sized version. You need something like php and the gd library for this.