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 and Upload Multiple files with HTML and PHP, using HTTP POST
HTML and PHP are commonly used together to create dynamic web applications. When it comes to uploading multiple files from an HTML form to a PHP script, the standard method is to use the HTTP POST method with multipart form encoding.
HTML Form for Multiple File Upload
Create an HTML form that allows users to select multiple files for uploading. Use the <input> element with the multiple attribute to enable multiple file selection. Set the form's enctype attribute to "multipart/form-data" to handle file uploads
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload</title>
</head>
<body>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<label for="files">Select files:</label>
<input type="file" name="files[]" id="files" multiple>
<input type="submit" value="Upload Files">
</form>
</body>
</html>
PHP Upload Handler
Create a PHP file (upload.php) to handle the file upload process. Access the uploaded files using the $_FILES superglobal
<?php
if (isset($_FILES['files'])) {
$errors = [];
$uploadedFiles = [];
$uploadPath = 'uploads/';
// Check if upload directory exists
if (!is_dir($uploadPath)) {
mkdir($uploadPath, 0755, true);
}
$fileNames = $_FILES['files']['name'];
$fileSizes = $_FILES['files']['size'];
$fileTmps = $_FILES['files']['tmp_name'];
$fileTypes = $_FILES['files']['type'];
foreach ($fileNames as $key => $name) {
$fileSize = $fileSizes[$key];
$fileTmp = $fileTmps[$key];
$fileType = $fileTypes[$key];
// Basic validation
if ($fileSize > 5000000) { // 5MB limit
$errors[] = "File {$name} exceeds 5MB limit";
continue;
}
// Generate unique filename
$fileName = uniqid() . '_' . basename($name);
$destination = $uploadPath . $fileName;
// Move uploaded file
if (move_uploaded_file($fileTmp, $destination)) {
$uploadedFiles[] = $fileName;
} else {
$errors[] = "Failed to upload {$name}";
}
}
// Display results
if (!empty($errors)) {
echo "<h3>Errors:</h3>";
foreach ($errors as $error) {
echo "<p style='color:red;'>{$error}</p>";
}
}
if (!empty($uploadedFiles)) {
echo "<h3>Successfully uploaded:</h3>";
foreach ($uploadedFiles as $file) {
echo "<p style='color:green;'>{$file}</p>";
}
}
} else {
echo "<p>No files selected.</p>";
}
?>
Directory Structure
Ensure your project has the following structure with proper permissions
project/ ??? index.html (your HTML form) ??? upload.php ??? uploads/ (created automatically with 755 permissions)
Setup Requirements: Ensure your web server (Apache/Nginx) has write permissions to create the uploads directory. You may need to set appropriate folder permissions using
chmod 755orchmod 777depending on your server configuration.
Key Features
- Multiple file selection: Users can select multiple files at once
- File validation: Basic size limits and error handling
-
Unique filenames: Prevents file conflicts using
uniqid() -
Security: Uses
basename()to prevent directory traversal - Error handling: Displays upload errors and success messages
Conclusion
This implementation allows users to select and upload multiple files simultaneously using HTML forms and PHP. The key is using name="files[]" with the multiple attribute and processing the $_FILES array in PHP. Always implement proper validation, file size limits, and security measures to protect against malicious uploads.
2K+ Views
