Upload Image In HTML And Display
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Anjali
In this tutorial we will show you the solution of upload image in HTML and display, as we know using input tag with ‘file’ type we can upload image, for displaying that image we used javascript.
Javascript is used by programmers across the world to create dynamic and interactive web content like applications and browsers and it is a client side programming language.
Let see how to use javascript for displaying image with step by step guidance.
Step By Step Guide On Upload Image In HTML And Display :-
In <input> tag has onchange event which is used for making the change in the state and transforming the value once the event is triggered.
With this help of event we transfer the value of uploaded image to createObjectURL() method in javascript.
It’s a static method creates a string containing a URL representing the object given in the parameter.
So it can create URL of image by the value and sets to <img> tag it will display the uploaded image on webpage.
Let see how to implement this.
<!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="200"/></p>
<script>
var loadFile = function(event) {
var image = document.getElementById('output');
image.src=URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- <input> tag with ‘file’ type for uploading files and ‘accept’ attribute defines uploaded file must be image with any extension like .png, .jpg, .jpeg or .gif.
- As we seen about onchange() event used for getting value of image when its empty state change to uploeded state event is triggered. So it transfers value of image to loadFile() function.
- In loadFile() function image value passed as parameter. Variable ‘image’ pointing <img> tag by ID ‘output’. Target returns the DOM element that triggered an specific event, so we can retrieve any property or attribute value.
- So event.target.files[0] this line has retrieved image value and URL.createObjectURL() method collects the string of uploaded image URL. Finally we gets path of uploaded image then this PATH set it to image variable.
- ‘image’ variable containing uploaded image URL binds to <img> tag in html, so the uploaded file finally displayed on webpage.
- Both </body>, </html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know upload and display image in html. Here for achieve this result we used more methods, function and events.
In output when user click on ‘choose file’ opens new window for selecting image after that image will displayed on webpage in a fraction of seconds.
Using javascript we gets result fast and easily. I hope this tutorial on upload image in HTML and display helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
