How to add file uploads function to a webpage in HTML ?
Allowing file upload to your website becomes necessary when you want to get the data from users in the form of a document, image, or file. HTML allows you to add the file upload functionality to your website by adding a file upload button to your webpage with the help of the <input> tag.
The <input type=”file”> defines a file-select field and a “Browse“ button for file uploads.
Syntax:
<input type="file" id="myfile" name="myfile" />
Example 1: The code with the file upload functionality can be seen below. The output shows a file upload button that reads “Choose File”. With the help of this button, we can upload the files to a particular website.
HTML
<!DOCTYPE html> < html > < body > < h1 >Show File-select Fields</ h1 > < h3 > Show a file-select field which allows only one file to be chosen: </ h3 > < form action = "/action_page.php" enctype = "multipart/form-data" > < label for = "myfile" >Select a file:</ label > < input type = "file" id = "myfile" name = "myfile" /> < br />< br /> < input type = "submit" /> </ form > </ body > </ html > |
Output:

File upload
Example 2: To define a file-select field that allows multiple files to be selected, add the ‘multiple‘ attribute as follows.
Syntax:
<input type="file" id="myfile" name="myfile" multiple>
In this way, we can create and upload a file button to our website. In order to make sure that the file data is read from the file to send to the server, make sure to use the “enctype=”multipart/form-data” attribute within the form tag. If this attribute is not used, the file data will not be read but only the file name will be read.
HTML
<!DOCTYPE html> < html > < body > < h1 >Show File-select Fields</ h1 > < h3 > Show a file-select field which allows multiple files to be chosen: </ h3 > < form action = "/action_page.php" enctype = "multipart/form-data" > < label for = "myfile" >Select a file:</ label > < input type = "file" id = "myfile" name = "myfile" multiple = "multiple" /> < br />< br /> < input type = "submit" /> </ form > </ body > </ html > |
Output:
Please Login to comment...