Image Preview using AJAX in PHP

Question

How should i create a preview of image to be uploaded before it is actually submitted using AJAX in PHP?

Answer 1

you first have to upload the document to server. Than you can show like.

<img src="uploads/file1_12224.jpg" />

Answer 2

Without uploading the image, this is going to be impossible in JavaScript as far as I can see, because security limitations are going to prevent you from determining the selected file in the file upload, and embedding that file in an img tag (as it used to be possible five years ago.)

You will be more lucky with Flash-based uploaders. I have seen some that offer the kind of functionality you want.

Update: Here's one that offers a preview function. From what I can see, it base64 encodes the local image and serves it to the surrounding HTML page as a inline data <img> tag. This is great because it might integrate well into your site. It does not work with any version of Internet Explorer, though.

Here's a fully Flash based solution that does previews in all browsers.

Answer 3

The "file" input type doesn't expose the local file location of the file to be uploaded. It does "appear" to because as a user you can see the location, but the web page never knows this value. Without the local file address, you can't show a preview of the image on the web page using plain HTML or JavaScript.