Grabbing the input file value and making an image

Question

I'm attempting to grab the value from the file input in html and placing it immediately into a div I have like so:

Html:

    <div class='pushLeft noOverflow' id='areaUpload'>
        <input type='file' id='uploadFileHere' />
    </div>

jQuery:

    $(document).on("change", "#uploadFileHere", function(){
        $("#areaUpload").html("<img src='" + $("#uploadFileHere").val() + "' />");

    });

The problem I'm having is that the image doesn't come up. I checked the file path and it was returning: C:\fakepath\filenamehere.jpg

So how would I be able to fix this issue?

Yograj Gupta · Accepted Answer · 2012-11-10 18:46:31Z

3

You can use FileReader for it, Try this.

$(document).on("change", "#uploadFileHere", function(){
      var fileInput = this;
      if (fileInput.files && fileInput.files[0]) {
            var fileReader = new FileReader();

            fileReader.onload = function (e) {
               $("#areaUpload").html("<img src='" +e.target.result + "' />");
            }

            fileReader.readAsDataURL(fileInput.files[0]);
        }
});

Check this DEMO

Thanks to @FabrícioMatté, For this JsFiddle Demo

Should note that older browsers (IE < 10) does not support this API

edited Nov 10, 2012 at 18:46

answered Nov 10, 2012 at 18:40

Yograj Gupta

9,8673 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabrício Matté Over a year ago

Beat me to making the example, nicely done. Here's a fiddle for your code. Should note that older browsers (IE < 10) does not support this API.

UXerUIer Over a year ago

Thanks for giving me the answer I was looking for.

Adil · Accepted Answer · 2012-11-10 18:33:25Z

3

You need to upload the file to server and save it on server directory within website. Then give the relative or absolute path to image tag.

answered Nov 10, 2012 at 18:33

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

Adil Over a year ago

Thanks Doh, Your turn is not far :)

UXerUIer Over a year ago

Hey guys, I'm not trying to upload content to my server. I just want to give the impression that it is. That's why I'm just trying to grab the value instead.

Rikki · Accepted Answer · 2012-11-10 18:33:39Z

1

Sir I think you should first use some ajax thing (like POST action of a form) and upload the image on the server, then get the actual URL from server and put it in the src attribute value. You can search for an Image uploader plugin and see how they work in these situations.

Hope it helps you. Cheers

answered Nov 10, 2012 at 18:33

Rikki

3,5681 gold badge25 silver badges34 bronze badges

6 Comments

UXerUIer Over a year ago

I'm able to do that, but I am not trying to upload content to my server. I'm just trying to give the impression that it is.

Rikki Over a year ago

impression of what? loading a resource from client that has a serious security issue?! you should run some validation on the file and ofcourse you have not the permission on the client side to do that. First an handler should recieve whatever user is trying to upload.

UXerUIer Over a year ago

First and foremost, I understand your concern, however, I did ask a specific question. You did not answer my answer specifically. For your information, this is not going to go live, this is just a demo I'm giving to my co-workers. I'm well aware of the security issues that come with file uploads.

Rikki Over a year ago

Evil is a evil, no matter how beautiful they would be. Wish you the bests. Cheers

UXerUIer Over a year ago

I understand that as well, but when you have time constraints, and you are the one who's controlling the outcome, especially locally, there is no problem with it,

|

Collectives™ on Stack Overflow

Grabbing the input file value and making an image

3 Answers 3

2 Comments

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related