1

How to get image instead of image name in html using file input type. I have used the css file for positioning the image file. I have tried all the sorts of code given... Please help.

<input type="file" name="photo" id="photo" onchange="readURL()"/>


function readURL()
{
   document.getElementById('previewimage').style.display='block';
}
Pavel Štěrba
  • 2,822
  • 2
  • 28
  • 50
user3436338
  • 17
  • 1
  • 7
  • 1
    possible duplicate of [In HTML5 how to show preview of image before upload?](http://stackoverflow.com/questions/14069421/in-html5-how-to-show-preview-of-image-before-upload) – Pavel Štěrba Mar 21 '14 at 09:17

1 Answers1

1
function readURL()
{
if (document.getElementById('photo').files && document.getElementById('photo').files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
    document.getElementById('previewimage').src = e.target.result;
};
reader.readAsDataURL(document.getElementById('photo').files[0]);
}
}
function openFiledialog(){  
  document.getElementById('photo').click();
}

//

<input type='button' onclick='openFiledialog()' value='photo'/>
<input type="file" style='display:none;' name="photo" id="photo" onchange="readURL()"/>
Ravinder Gujiri
  • 1,494
  • 10
  • 14