Signup/Sign In
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.

file upload button

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.



About the author: