Show Thumbnail of the selected Image

I need to show the thumbnail near the selected image in the HT开发者_如何学GoML form.

<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
</form>

Also I have written the move_uploaded_file function as the php part. What I need is before submitting the form I need to show the thumbnail of the image which I selected. How can I acheive this?

This is no longer possible without actually uploading the file due to security restrictions in modern browsers.

• In some browsers, it is no longer possible to link to a local image

• IE7+ and FF3+ (And I think other modern browsers, too) will not reveal the full image path any more, but provide a C:\Fakepath style path instead.

Try HTML5Rocks' example. It does what you desired.

I would recommend using the thumbnailer image already recommended by fabrik.

In case you wanted to do it yourself (or if you just want to understand how it's done):

You need to handle the upload of the image using an iframe (since AJAX does not support file uploads) and you can then just create an element using the uploaded image (either by getting an id from an AJAX call or by having some sort of convention on how it's going to happen) and put it wherever you need it.

The solution recommended by Coding Freak, I believe, won't work. I don't remember the DOM being able to provide full directory to the file selected by the user using the input. As far as I know, you can only access the name of the file (not all the directory)... which seems obvious for security reasons.

There's also the possibility of using a Java applet (EWWW) or Flash (just a bit ew). OR, if you want to go edgy, go with HTML5's File API, but it won't be supported by a lot of browsers.