1

I need to show the thumbnail near the selected image in the HTML 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?

Deepak
  • 872
  • 2
  • 7
  • 13
  • I don't think you written the `move_uploaded_file` function, sorry :) Try to use some of the thumbnailer library out there e.g. http://phpthumb.sourceforge.net/ – fabrik Mar 21 '11 at 10:32
  • @fabrik: My uploading code is like move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]); And it is uploading fine. – Deepak Mar 21 '11 at 10:35
  • that was just a joke suggesting you are the author of the function you've mentioned. sorry if was too bad :) seriously, try to make use of phpthumb i think even there are some examples on their website too. – fabrik Mar 21 '11 at 10:37

3 Answers3

0

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.

Unicron
  • 7,275
  • 1
  • 26
  • 19
  • @fabrik Why not post that as an answer with an example, it would get *my* upvote... However, that API won't work in IE at all (including 9) – Unicron Mar 21 '11 at 10:41
  • There's a mention to a link on MDC but it isn't working now (Chrome/Firefox) http://stackoverflow.com/questions/5256620/are-i-can-preview-the-image-file-who-uploaded-by-user-in-the-browser/5256653#5256653 – fabrik Mar 21 '11 at 10:43
0

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.

Mamsaac
  • 6,173
  • 3
  • 21
  • 30
0

Try HTML5Rocks' example. It does what you desired.

fabrik
  • 14,094
  • 8
  • 55
  • 71