preview image

hi all,
I want to preview an image in javascript but my code is working only in internet explore. not working properly on other browsers .


here is my code. Any suggestion can be highly appreciated








<form>
<input type="text" name="name">
<input type="file" name="file" id="file"/>
<input type="button" name="preview" value ="preview" onClick="abc()"/>
<input type="button" name="submit" value ="submit"/>
</form>

<div id="div_prev">dfsdfsd</div>


<script language="javascript" type="text/javascript">
function abc(){
var ab=document.getElementById('file').value;
//document.getElementById('div_prev').html=document.getElementById('file').value;
alert(ab);
document.getElementById('div_prev').innerHTML="<img src='"+ab+"' width=50px height=50px>"
}

</script>

 

str = '<img src="' + ab + '" width="50" height="50">';
document.getElementById('div_prev').innerHTML= str

Code (markup):

next time don't use " for starting a 'string' but use ' and PX doesn't have a real value in your statement.

try this!

 

"document.getElementById('file').value;" only works in IE. It won't work on other browsers.
I am not sure about other browsers, but this works well in firefox:

var fileLocation = document.getElementById("file").files[0].getAsDataURL();

Code (markup):

You can have a check whether it is IE, like below.

if (typeof window.ActiveXObject != 'undefined') {
        //code for IE
} else {
        // Other browser
}

Code (markup):

Also it would be much helpful, if you could use CODE tags for displaying your code.