display image using javascript using the file upload

Question

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';
}

possible duplicate of In HTML5 how to show preview of image before upload? — Pavel Štěrba
– Pavel Štěrba, Commented Mar 21, 2014 at 9:17

Ravinder Gujiri · Accepted Answer · 2014-03-21 09:57:44Z

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()"/>

edited Mar 21, 2014 at 9:57

answered Mar 21, 2014 at 9:20

Ravinder Gujiri

1,52410 silver badges14 bronze badges

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

3 Comments

Ravinder Gujiri Over a year ago

try uploading smaller images

user3436338 Over a year ago

oh.. how to make the name of the image to disappear. Is that default while using input type file?

Ravinder Gujiri Over a year ago

use this update code, only buton will be visible to the user.

Collectives™ on Stack Overflow

display image using javascript using the file upload

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related