PUBLISHED ON: JULY 28, 2021
How to create a file upload button with HTML?
To upload the file on the website, HTML provides a file input tag. The files can be uploaded for various usages like uploading different documents and files. In this tutorial, we will be learning to create a file upload button.
Using input type="file"
The file upload button can be created using the <input>
field after Adding type="file"
attribute to it. When we click on the button, it will open the file explorer where you can select files. To add multiple files, we can add multiple
attribute to the <input>
field.
Example: Add file upload button with HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>File upload button</h2>
<form action="/action_page.php">
<label for="file">Choose the file</label>
<input type="file" id="file" name="file">
</form>
</body>
</html>
Output
Here is the output of the above program.
Example: A file button to upload multiple files
In this example, we will use multiple
attribute to <input>
so that we can upload multiple files with a single button.
Conclusion
In this tutorial, we have learned to create a file upload button using HTML. We can create it by using type="file"
within <input>
. We can also upload multiple files using this attribute.