HTML
<body>
<input type="file" accept="image/*" onchange="loadFile(event)">
<p><img id="output" width="150"/></p>
</body>
javascript
<script>
const loadFile = function(event) {
const image = document.getElementById('output');
image.src=URL.createObjectURL(event.target.files[0]);
};
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>imgae upload and display</title>
</head>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)">
<p><img id="output" width="150"/></p>
<script>
const loadFile = function(event) {
const image = document.getElementById('output');
image.src=URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>