Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Select Multiple Files using HTML Input Tag?
The HTML input tag is a powerful tool that allows developers to create dynamic web pages. One useful feature of the input tag is the ability to select multiple files at once using the multiple attribute.
The input tag in HTML has various attributes that allow us to customize the behavior of the tag. The most commonly used attribute for file selection is the type attribute with a value of file. This attribute tells the browser that the input element is used for selecting files.
Syntax
<input type="file" name="files" multiple>
In the above syntax
The input tag is used to create a user input field on a webpage.
The type attribute specifies the type of input field. In this case, we are using type="file" to create a file upload field.
The name attribute specifies the name of the file input field. This name will be used to identify the file input field when the form is submitted.
The multiple attribute specifies that the user can select multiple files for upload.
Basic Multiple File Selection
To create an HTML input tag for file uploads that allows users to select multiple files, we will use the following example
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin: 50px;
}
</style>
</head>
<body>
<h3>Basic file input field with multiple attributes</h3>
<p>You can choose multiple files below:</p>
<form method="post" action="upload.php" enctype="multipart/form-data">
<label for="fileUpload">Choose files:</label>
<input type="file" id="fileUpload" name="files[]" multiple>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
A webpage with a file input field that allows selecting multiple files, along with a Submit button. Users can hold Ctrl (or Cmd on Mac) while clicking to select multiple files.
Styled Multiple File Upload
The default look of the file input field may not fit with your website's design. Here's how to style it using CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin: 50px;
background-color: #f4f4f4;
}
.file-upload {
position: relative;
overflow: hidden;
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin: 10px;
}
.file-upload:hover {
background-color: #45a049;
}
.file-upload input[type=file] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
.submit-btn {
background-color: #2196F3;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
margin: 10px;
transition: background-color 0.3s;
}
.submit-btn:hover {
background-color: #1976D2;
}
</style>
</head>
<body>
<h3>Custom Styled Multiple File Upload</h3>
<form method="post" action="upload.php" enctype="multipart/form-data">
<label class="file-upload">
? Choose Multiple Files
<input type="file" name="files[]" multiple>
</label>
<br><br>
<input class="submit-btn" type="submit" name="submit" value="Upload Files">
</form>
</body>
</html>
A webpage with a custom-styled green button labeled "? Choose Multiple Files" and a blue "Upload Files" submit button. The buttons have hover effects and modern styling with rounded corners.
Key Points
The multiple attribute is essential for enabling multiple file selection.
Always use enctype="multipart/form-data" in the form tag for file uploads.
Use array notation name="files[]" to handle multiple files on the server-side.
Link labels with input fields using the for and id attributes for better accessibility.
Conclusion
The HTML input tag with the multiple attribute allows users to select and upload multiple files efficiently. By combining proper HTML structure with CSS styling, you can create user-friendly file upload interfaces that match your website's design.
2K+ Views
