input type="file" and display image

Alex29 answered on June 8, 2020 Popularity 10/10 Helpfulness 10/10

answer input type="file" and display image

related input file img / input file image

input type="file" and display image

Comment

<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="200" /></p>

<script>
var loadFile = function(event) {
	var image = document.getElementById('output');
	image.src = URL.createObjectURL(event.target.files[0]);
};
</script>

Popularity 10/10 Helpfulness 10/10 Language html

Source: Grepper

Tags: display html image input

Link to this answer
Share Copy Link

Contributed on Jun 08 2020

Alex29

0 Answers Avg Quality 2/10

Closely Related Answers

input file img / input file image

Comment

<div class="image-upload">
  <label for="file-input">
    <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
  </label>

  <input id="file-input" type="file" />
</div>


 // CSS

.image-upload>input {
  display: none;
}

Popularity 10/10 Helpfulness 4/10 Language html

Source: stackoverflow.com

Tags: file

Link to this answer
Share Copy Link

Contributed on Mar 18 2022

Powerful Pony

0 Answers Avg Quality 2/10

input type="file" and display image

Contents

More Related Answers

input type="file" and display image

Closely Related Answers

input file img / input file image

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.