How do I program an insert image button?

Asked

Viewed 85 times

-1

I want an "Insert image" button and when you click on it, right on top of it the inserted image appears (Taken from pc), you do not need to save the information, or anything, just make the image appear on top.

html image insert

  • have you tried searching here on the site or on google? have several examples, and also need javascript for this, only with html will not be possible

1 answer

0


Hello, good morning, here comes the full code... Good luck!

<html>
<head>
<title>Default</title>
</head>
<body>
<div style="width:350px;height:350px;border:dashed 1px #ccc;" id="view_photo"><img id='output' style="height:100px; width=100px"></div>
<input type="file" name="files" />

<!--[Script]-->
<script>
var files = document.querySelector('input[name="files"]');

files.addEventListener("change", function(file){
	var input = file.target;
	
	var reader = new FileReader();
    
	reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };

    reader.readAsDataURL(input.files[0]);
});
</script>
</body>

Browser other questions tagged html image insert

You are not signed in. Login or sign up in order to post.