How to preview a image before upload using JavaScript or jquery?

Question

I just need to display the image chosen (Browse) by the user before the upload. For this purpose i am using this code:

JS

function setImage(file) {
    if(document.all)
        document.getElementById('prevImage').src = file.value;
    else
        document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
    if(document.getElementById('prevImage').src.length > 0) 
        document.getElementById('prevImage').style.display = 'block';
}

HTML

<img id="prevImage"  src=""  alt="" width="313" height="315" />
<input name="photo1" id="photo1" type="file" onchange="setImage(this);"  value="" class="input" size="17"/>

This code working fine in Safari, Firefox 3,4,5 but doesn't work in Google Chrome 12 or higher and IE 8, 9.

So please tell me any solution regarding this issues?

I already tried other solution given on this website but they are also not working in all major browsers.

if you have a solution for this code or a completely new code then please tell me.

Community · Accepted Answer · 2017-05-23 11:47:51Z

1

I find a complete solution from another stack post, here is the solution.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Jul 29, 2011 at 9:12

Awea

3,1838 gold badges42 silver badges60 bronze badges

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

Comments

gdm · Accepted Answer · 2014-07-07 12:01:00Z

0

You can also use FileReader which is a standard Web API now.

answered Jul 7, 2014 at 12:01

gdm

8,0464 gold badges46 silver badges74 bronze badges

Collectives™ on Stack Overflow

How to preview a image before upload using JavaScript or jquery?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related