AJAX Image Upload Preview

Not for 'how-to' coding questions but PHP theory instead, this forum is here for those of us who wish to learn about design aspects of programming with PHP.

Moderator: General Moderators

Post Reply
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

AJAX Image Upload Preview

Post 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?
User avatar
Nathaniel
Forum Contributor
Posts: 396
Joined: Wed Aug 31, 2005 5:58 pm
Location: Arkansas, USA

Post 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".
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Re: AJAX Image Upload Preview

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply