Get thumbnail from input type="file"

Question

I'm building an photo uploader. When user choose a photo from <input type="file">

I use jquery to submit the selected file from user to my server, the server save that image to disk and make a thumbnail.

The server return the URL of the thumbnail to client.

Then jquery display the image to user. That is client/server.

Now, can I show the thumbnail of selected file from user without post it to Server ?

( It's like Facebook photo uploader, we needn't click Preview to view thumbnail of selected Photo. Facebook do it for us )

score 4 · Accepted Answer · edited May 23 '17 at 12:16

4

You can use FileReader API, see demo from this answer:

var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

oFReader.onload = function (oFREvent) {
    document.getElementById("uploadPreview").src = oFREvent.target.result;
};

edited May 23 '17 at 12:16

Community

1
1

answered Feb 20 '14 at 08:38

Pavel Štěrba

2,822
2
28
50

3

1. This should be a comment. 2. This question should be marked as duplicate. You shouldn't copy answers. – James Donnelly Feb 20 '14 at 08:42

score 1 · Answer 2 · answered Feb 20 '14 at 08:38

1

yes you can only modern browsers support it.
You are looking for FileReader

Take a look on this quick tutorial that also includes the demo( Implemented FileReader API ) and progress bar as well.

answered Feb 20 '14 at 08:38

jogesh_pi

9,762
4
37
65

Get thumbnail from input type="file"

2 Answers2