How to Upload Image in HTML?

Uploading an image in HTML involves creating a form element that allows users to select an image file from their device. The selected image is then sent to the server or processed on the client side using JavaScript. This process is used for various web applications, such as profile picture uploads, image galleries, and more.

These are the following approaches:

1. Using Form Submission

The simplest way to upload an image is by creating a form with a file input field that allows users to select an image from their device. When the form is submitted, the image file is sent to the server, where it can be saved or processed.

Example: In this example, when the user clicks the "Upload Image" button, the form is submitted to the server-side script upload.php, which handles the image upload.

Output:

2. Using Base64 Encoding

Another method involves converting the image file into a Base64 encoded string. This string is then included in the form data and sent to the server. This approach is useful when you want to include the image data directly in a JSON object or a similar format.

Example: The image is read as a Base64 encoded string using the FileReader API. The preview is displayed on the page, and the encoded string can be sent to the server.

Output: