Image preview before upload is a basic and important feature nowadays in profile registration forms. Image preview helps the user to verify the image before uploading. Even more, the user can select another image if needed before submitting a form.
The given below HTML code explains the method to preview an image before uploading it to the server.
In the above example, we first create an input field of file type and filter it for only images to upload. Also, we create an image element with preview_image_container id to preview the chosen image. After that, we create image_preview() function and set it to onchange event for the input field. In image_preview() function we pass an event of file selection.
When the onchange event will trigger our image_preview() function will be called. In the image_preview() function event will be passed as an argument. That event will hold the source of the image file and will be set to the src attribute of the #preview_image_container image element.
Here, we created a 300X300 px image container for preview. However, we can create our own preview section with custom CSS.
Enjoy Coding 🙂