How to display uploaded image in HTML using Javascript

How to display uploaded image in HTML using Javascript
Table of Contents

Looking for a way to display the uploaded image in HTML using Javascript then you are at the right today in this tutorial guide I will show you how to display uploaded image in HTML using Javascript so follow up with me till the end.

We have to use the HTML file upload input so that users are able to upload images or any type of files. In this tutorial we will just focusing on image input so we just want to make sure images are uploaded so to do that we will use the below input tag.

				
					<input type="file"  accept="image/*" name="image" id="imgFile"  onchange="loadFile(event)">
				
			

As you can see it is the regular input for file upload but with additional attribute which only accepts image files now let’s see how to display the uploaded image using Javascipt. So to display image you need to use the below HTML and Javascript code.

How to display uploaded image in HTML using Javascript with upload button

				
					<input type="file"  accept="image/*" name="image" id="imgfile"  onchange="loadFile(event)">

<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>
				
			

You can use the above code to display the uploaded image in HTML if you have tested this you can see the upload button then you can only select images after choosing one you can see the preview of the image on the website.

How to hide file upload button in HTML and replacing with text

Above I have shown how to display image with the regular upload button if you don’t like that button you can change it to text it is very easy you just have to make some small changes you can copy the below code and replace with the other one’s.

				
					<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>
				
			

You just have to replace it with the regular file upload input and you will see a text which say upload Image instead of a ugly button.

Conclusion

I have shown you how to display the uploaded image in HTML using Javascript and also how to hide the file upload button in HTML this was for this tutorial I hope you found what you were looking for and if you want more guides like this here are some more guides:

Want more article guides like this then stay with us by joining our Telegram channel for latest updates of our guides and more – Join Telegram Channel.

Thank you for reading, Have a nice day 🙂

Share This Post
Share on facebook
Share on twitter
Share on email
Share on whatsapp

Leave a Reply

Subscribe To Our Newsletter

Get updates and learn from the best

Latest Guides & Articles