Page 1 of 1

AJAX Image Upload Preview

Posted: Thu Jun 22, 2006 9:32 am
by TheMoose
Not sure where to begin on asking this, so I'll start with what I want to accomplish.

Basically my idea is that I want the user to select an image file to upload, and then it shows a thumbnailed preview of the selected file in a small frame off to the side, without reloading the page (hence the AJAX piece).

My dilemma here is that I cannot figure out how exactly to post this via Javascript to the PHP page to thumbnail/resize the image, and then send back the preview, because Javascript cannot access the raw data of the selected file, only the filename (right?).

Is this even possible? Or am I going to have to post to the page manually?

Posted: Thu Jun 22, 2006 9:50 am
by Nathaniel
I'm not sure, but couldn't you just do <img src="{use javascript to put the value of the input field for the upload form here}" width="200" height="200">? The file should show up, since the browser can access "C:\My Documents\blah blah blah.jpg".

Re: AJAX Image Upload Preview

Posted: Thu Jun 22, 2006 9:58 am
by Oren
TheMoose wrote:Is this even possible?
Yest, it is. I've seen it done on http://www.shopify.com, but I don't know Ajax so I can't help you with that part.

Posted: Thu Jun 22, 2006 10:05 am
by pickle
Continuing on what ~Nathaniel said:

You don't need AJAX for this. Just tie a JS function to the onChange event on your "file" element. Once the user has selected an image, use Javascript to pop open a new window/new frame and show the image in there.