How to upload files using HTML to website ?

Last Updated : 02 Aug, 2024

Every file that needs to be uploaded to the website, required the basic form which facilitates uploading. This feature is essential when we are filling out the form on a specific website. This file upload may support a variety of file formats along with various types of files. The file uploading feature is one of the essential parts of the form on the website. In this article, we will learn to build the file upload feature in the website using HTML. We will use the concept of HTML <input> tag that will allow the user to upload files to a website.

<input> Tag

A <input> tag can be used to specify an input field where the user can enter the required data. The input tag is used within the <form> element to declare input controls that allow users to input data. An input field can be of various types depending upon the attribute type. The Input tag is an empty element that only contains attributes. Here, we have defined a type attribute whose value is set as “file”

Syntax

This syntax specifies the file-select field that enables the feature to choose one or more files from their device storage and then upload it to a server using the form submission button.

<input type = "file"... />

Example: This example illustrates the use of the <input> tag by specifying the type attribute as a file.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
          How to upload files using HTML to website?
      </title>
</head>

<body style="text-align: center;">

    <h1 style="color: green;">
          Welcome to GeeksforGeeks
      </h1>
    <h2>
          How to upload files using HTML to website?
      </h2>
    <input type="file" 
           id="file1" 
           name="upload">
</body>

</html>

Output: In the output, you can see that when the file is chosen and then uploaded, its name is also showing right beside the button.