how to display uploaded image in html using javascript

OP answered on April 22, 2021 Popularity 10/10 Helpfulness 9/10

answer how to display uploaded image in html using javascript

related upload and display image javascript

how to display uploaded image in html using javascript

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 9/10 Language javascript

Source: www.webtrickshome.com

Tags: display html image javascript using

Link to this answer
Share Copy Link

Contributed on Apr 22 2021

0 Answers Avg Quality 2/10

Closely Related Answers

upload and display image javascript

Comment

Upload and display image javascript

const file = document.querySelector("#file") // or document.getElementById(file)

file.addEventListener("change", function() {

  const reader = new FileReader()

  reader.addEventListener("load", () => {
    document.querySelector("#image").src = reader.result
  })

  reader.readAsDataURL(this.files[0])

})

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: display

Link to this answer
Share Copy Link

Contributed on Jan 04 2023

Banta, Jio T.

0 Answers Avg Quality 2/10

how to display uploaded image in html using javascript

Contents

More Related Answers

how to display uploaded image in html using javascript

Closely Related Answers

upload and display image javascript

Grepper

Documentation

Social

Legal

Contact

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