How to preview a image before upload using JavaScr

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.

Answer 1

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

Answer 2

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