How can i upload multiple images with PHP and HTML-CodePudding

I'm trying to create a upload form where user can upload 3 files/images via 3 inputs but unfortunately i dont have enough knowledge of PHP to make it work.

The code that im using is this:

https://notepad.pw/xNOPaZSw7nkw3wXCIFHo

CodePudding user response：

I have modified your code so that you can upload multiple images from the same input type

Below is your index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="upload-script.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload[]" id="fileToUpload" multiple="multiple">
  <input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>

This will be your upload-script.php file

<?php 

if (isset($_FILES['fileToUpload'])) {
    $total = count($_FILES['fileToUpload']['name']);
    $target_dir = "uploads/";    
    $uploadOk = 1;
    
    // Check if image file is a actual image or fake image

    for( $i=0 ; $i < $total ; $i   ) { 
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"][$i]);
    if($check !== false) {
        echo "<br>File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "<br>File is not an image.";
        $uploadOk = 0;
    }

    // Check if $uploadOk is set to 0 by an error
            
        $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"][$i]);
        $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"][$i], $target_file)) {
        echo "<br>The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"][$i])). " has been uploaded.";
        } else {
        echo "<br>Sorry, there was an error uploading your file.";
        }
        }
} 
?>

If you want to upload just 3 images then you can modify the $total variable to for loop to your need.

Similarly if you need 3 separate file pickers you can check this modified code.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="upload-script2.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload1" id="fileToUpload1" required>
  <input type="file" name="fileToUpload2" id="fileToUpload2" required>
  <input type="file" name="fileToUpload3" id="fileToUpload3" required>
  <input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>

This will be your upload-script.php

<?php
if(isset($_POST['submit'])){
if (isset($_FILES['fileToUpload1'])) {
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload1"]["name"]);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
    // Check if image file is a actual image or fake image
   
    $check = getimagesize($_FILES["fileToUpload1"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }

    // Check if $uploadOk is set to 0 by an error
        if ($uploadOk == 0) {
        echo "Sorry, your file was not uploaded.";
            // if everything is ok, try to upload file
            } else {
        if (move_uploaded_file($_FILES["fileToUpload1"]["tmp_name"], $target_file)) {
        echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload1"]["name"])). " has been uploaded.";
        } else {
        echo "Sorry, there was an error uploading your file.";
        }
    }


} 
if (isset($_FILES['fileToUpload2'])) {
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload2"]["name"]);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
    // Check if image file is a actual image or fake image
   
    $check = getimagesize($_FILES["fileToUpload2"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }

    // Check if $uploadOk is set to 0 by an error
        if ($uploadOk == 0) {
        echo "Sorry, your file was not uploaded.";
            // if everything is ok, try to upload file
            } else {
        if (move_uploaded_file($_FILES["fileToUpload2"]["tmp_name"], $target_file)) {
        echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload2"]["name"])). " has been uploaded.";
        } else {
        echo "Sorry, there was an error uploading your file.";
        }
    }


}
if (isset($_FILES['fileToUpload3'])) {
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload3"]["name"]);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
    // Check if image file is a actual image or fake image
   
    $check = getimagesize($_FILES["fileToUpload3"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }

    // Check if $uploadOk is set to 0 by an error
        if ($uploadOk == 0) {
        echo "Sorry, your file was not uploaded.";
            // if everything is ok, try to upload file
            } else {
        if (move_uploaded_file($_FILES["fileToUpload3"]["tmp_name"], $target_file)) {
        echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload3"]["name"])). " has been uploaded.";
        } else {
        echo "Sorry, there was an error uploading your file.";
        }
    }


}
}
?>

You can remove the isset checks for the images, as i have made all the images required. If you remove the required attr from html then you will need the isset checks