How to select and upload multiple files with HTML and PHP, using HTTP POST?

In this article, we will look at how to upload multiple files with HTML and PHP. Multiple image upload allows the user to select multiple files at once and upload all files to the server.

index.html Create a simple HTML page to select multiple files and submit it to upload files on the server. Here, the HTML file contains a form to select and upload files using the POST method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Select and upload multiple
        files to the server
    </title>
</head>
  
<body>
  
    <!-- multipart/form-data ensures that form
    data is going to be encoded as MIME data -->
    <form action="file_upload.php" method="POST"
            enctype="multipart/form-data">
  
        <h2>Upload Files</h2>
          
        <p>
            Select files to upload: 
              
            <!-- name of the input fields are going to
                be used in our php script-->
            <input type="file" name="files[]" multiple>
              
            <br><br>
              
            <input type="submit" name="submit" value="Upload" >
        </p>
    </form>
</body>
  
</html>                    

chevron_right


file_upload.php The file_upload.php script will handle the file uploading and show the upload status.



filter_none

edit
close

play_arrow

link
brightness_4
code

<?php 
  
// Check if form was submited
if(isset($_POST['submit'])) {
  
    // Configure upload directory and allowed file types
    $upload_dir = 'uploads'.DIRECTORY_SEPARATOR;
    $allowed_types = array('jpg', 'png', 'jpeg', 'gif');
      
    // Define maxsize for files i.e 2MB
    $maxsize = 2 * 1024 * 1024; 
  
    // Checks if user sent an empty form 
    if(!empty(array_filter($_FILES['files']['name']))) {
  
        // Loop through each file in files[] array
        foreach ($_FILES['files']['tmp_name'] as $key => $value) {
              
            $file_tmpname = $_FILES['files']['tmp_name'][$key];
            $file_name = $_FILES['files']['name'][$key];
            $file_size = $_FILES['files']['size'][$key];
            $file_ext = pathinfo($file_name, PATHINFO_EXTENSION);
  
            // Set upload file path
            $filepath = $upload_dir.$file_name;
  
            // Check file type is allowed or not
            if(in_array(strtolower($file_ext), $allowed_types)) {
  
                // Verify file size - 2MB max 
                if ($file_size > $maxsize)         
                    echo "Error: File size is larger than the allowed limit."
  
                // If file with name already exist then append time in
                // front of name of the file to avoid overwriting of file
                if(file_exists($filepath)) {
                    $filepath = $upload_dir.time().$file_name;
                      
                    if( move_uploaded_file($file_tmpname, $filepath)) {
                        echo "{$file_name} successfully uploaded <br />";
                    
                    else {                     
                        echo "Error uploading {$file_name} <br />"
                    }
                }
                else {
                  
                    if( move_uploaded_file($file_tmpname, $filepath)) {
                        echo "{$file_name} successfully uploaded <br />";
                    }
                    else {                     
                        echo "Error uploading {$file_name} <br />"
                    }
                }
            }
            else {
                  
                // If file extention not valid
                echo "Error uploading {$file_name} "
                echo "({$file_ext} file type is not allowed)<br / >";
            
        }
    
    else {
          
        // If no files selected
        echo "No files selected.";
    }
  
?>

chevron_right


Output:

  • Before Uploading the file:
  • After Uploading the file:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.