image uploading to temp and giving a preview to user

[pradeepjain]

Hii guys,
I have a small requirement which before starting i want to be clear of how to go above it. Since javascript will not work for image preview i need to write a php code so that we can store the image when a user select an image in a temp on server and then give a preview to him.
How to go on with this or is there any example for reference.


thanks,
pradeep

[adamalton]

So you want to allow a user to upload an image and then show them a preview of that image?

I'm not going to attempt to write the PHP for that here, but I will give you some pointers...
For the file/photo upload:

http://uk2.php.net/manual/en/function.move-uploaded-file.php

There's an example further down the page of how to use it.

For manipulating the image (making it smaller/bigger, creating a thumbnail, etc):

http://uk2.php.net/manual/en/function.imagecreatefromjpeg.php

If you look down the side of that page there are LOADS of image manipulation functions. You'll probably need a few of them to do what you want. Although, if you want to leave the user's image exactly how it is (i.e. not resize it, or compress it or anything) then you could get away with not needing any of those functions. Though I wouldn't recommend leaving the image how it is (it might be huuuuge).

You can use this image function:

http://uk2.php.net/manual/en/function.imagejpeg.php

To save the image to a folder on your server, and then you can just stick
[HTML]<img src="location/where/you/saved/that/image.jpg" alt="nice pic" />[/HTML] into your page.

I hope that helps.

[pradeepjain]

hey is there a way to preview the image to the user as soon as he select the image ??

[Markus]

hey is there a way to preview the image to the user as soon as he select the image ??

Nope.
Not unless you're using flash or something like.

[nathj]

Nope.
Not unless you're using flash or something like.

I'm just speculating here, but if you were to use the file upload in a psuedo AJAX way (I know it's not AJAX) using iFrames you could write out the image source after upload to <img> tags.

The form with the file upload would process in the iFrame so not leaving the page and then where you would echo out the success message for the file upload you could take the new file path and put it into the src attribute of the <img> tags using some inline JS.

That's an overview of how to do it. Once the user submits the form you see the image on the page as a way of confirming it has been uploaded.

AjaxF1 tutorial

The JS at the very end is where you could load the img tags to have them display the loaded image for the user.

Cheers
nathj

PS I haven't tried this but I see no reason why it won't work.