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 allow multiple file uploads in HTML forms.
In this article, we will learn how to allow multiple file uploads in HTML forms. The multiple attribute enables users to select and upload several files at once through a single input field, providing a more efficient user experience for file uploads.
The multiple attribute is a boolean attribute that works with email and file input types. When applied to file inputs, it allows users to select multiple files from their device using the standard file picker dialog.
Syntax
Following is the syntax for enabling multiple file uploads in HTML forms −
<input type="file" name="fieldname" multiple>
The multiple attribute can also be written with an explicit value −
<input type="file" name="fieldname" multiple="multiple">
Both syntaxes are equivalent and produce the same functionality. The boolean form (multiple) is more commonly used in modern HTML.
Basic Multiple File Upload
The simplest way to create a multiple file upload field is by adding the multiple attribute to a file input element.
Example
Following example demonstrates basic multiple file upload functionality −
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Upload Multiple Files</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="files">Select files:</label><br><br>
<input type="file" id="files" name="uploaded_files" multiple><br><br>
<input type="submit" value="Upload Files" style="padding: 8px 16px;">
</form>
</body>
</html>
This creates a file input that allows users to select multiple files by holding Ctrl (Windows) or Cmd (Mac) while clicking, or by selecting a range with Shift-click.
Multiple File Upload with File Type Restrictions
You can restrict the types of files users can select by combining the multiple attribute with the accept attribute.
Example − Images Only
<!DOCTYPE html>
<html>
<head>
<title>Multiple Image Upload</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Upload Multiple Images</h2>
<form action="/upload-images" method="post" enctype="multipart/form-data">
<label for="images">Select image files:</label><br><br>
<input type="file" id="images" name="image_files" multiple accept="image/*"><br><br>
<input type="submit" value="Upload Images" style="padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px;">
</form>
</body>
</html>
The accept="image/*" attribute restricts file selection to image formats only (JPEG, PNG, GIF, etc.).
Example − Specific File Types
<!DOCTYPE html>
<html>
<head>
<title>Multiple Document Upload</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Upload Multiple Documents</h2>
<form action="/upload-docs" method="post" enctype="multipart/form-data">
<label for="documents">Select PDF, Word, or Excel files:</label><br><br>
<input type="file" id="documents" name="doc_files" multiple accept=".pdf,.doc,.docx,.xls,.xlsx"><br><br>
<input type="submit" value="Upload Documents" style="padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 4px;">
</form>
</body>
</html>
This example restricts uploads to specific document formats using file extensions.
Enhanced Multiple File Upload with JavaScript
JavaScript can enhance the user experience by showing selected file information and providing upload feedback.
Example − Display Selected Files
<!DOCTYPE html>
<html>
<head>
<title>Enhanced Multiple File Upload</title>
<style>
.file-info {
margin: 10px 0;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
}
.file-item {
padding: 5px 0;
border-bottom: 1px solid #dee2e6;
}
.file-item:last-child { border-bottom: none; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Upload Multiple Files with Preview</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="fileInput">Choose files:</label><br><br>
<input type="file" id="fileInput" name="files" multiple><br><br>
<div id="fileInfo" class="file-info" style="display: none;">
<h3>Selected Files:</h3>
<div id="fileList"></div>
</div>
<input type="submit" value="Upload Files" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px;">
</form>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
const files = e.target.files;
const fileInfo = document.getElementById('fileInfo');
const fileList = document.getElementById('fileList');
if (files.length > 0) {
fileInfo.style.display = 'block';
fileList.innerHTML = '';
for (let i = 0; i < files.length; i++) {
const file = files[i];
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
fileItem.innerHTML = `<strong>${file.name}</strong> (${(file.size / 1024).toFixed(1)} KB)`;
fileList.appendChild(fileItem);
}
} else {
fileInfo.style.display = 'none';
}
});
</script>
</body>
</html>
This enhanced example displays the names and file sizes of selected files, giving users immediate feedback about their selections.
Important Considerations
When implementing multiple file uploads, keep these key points in mind −
-
Form encoding − Always use
enctype="multipart/form-data"in your form tag when uploading files. -
Server limits − Configure your server to handle multiple file uploads and set appropriate file size and count limits.
-
File validation − Validate file types, sizes, and counts both on the client side (for user experience) and server side (for security).
-
Browser support − The multiple attribute is supported in all modern browsers, but older browsers may not support it.
File Selection Methods
Users can select multiple files in different ways depending on their operating system −
| Action | Windows | Mac | Result |
|---|---|---|---|
| Select multiple individual files | Ctrl + Click | Cmd + Click | Non-consecutive selection |
| Select range of files | Shift + Click | Shift + Click | Consecutive selection |
| Select all files | Ctrl + A | Cmd + A | All files in current folder |
Conclusion
The multiple attribute provides a simple yet powerful way to enable multiple file uploads in HTML forms. By combining it with proper form encoding, file type restrictions, and JavaScript enhancements, you can create user-friendly file upload interfaces that handle multiple files efficiently and securely.
19K+ Views
