Upload Multiple Images in PHP with Preview

Here are 3 Simple Steps to Upload Multiple Images in PHP with Preview. Here we discuss in-depth code review where we use image upload source code and what are the important PHP functions to use for uploading multiple images.

3 Simple Steps to Upload Multiple Images in PHP

The list of 3 Simple Steps to Upload Multiple Images in PHP as follows,

Create HTML form.
Create a JS script for previews.
Create a PHP file for Upload all images.

jQuery autocomplete ajax with Text and Image

HTML Form (index.php)

Before creating form here are some required attribute which is used for upload images,

Use enctype="multipart/form-data" attribute on <form> tag.
Use type="file" on <input> tag.
On the same input tag use name attribute with an array type.

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
    <script type="text/javascript" src="show.js"></script>
    <style>
      .container {
        max-width: 600px;
      }
      .card{
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container mt-5">
      <form action="create_photo_gallery.php" method="POST" enctype="multipart/form-data" id="imageInputForm">
        <div class="custom-file">
          <input type="file" id="uploadImageFile" class="custom-file-input" name="uploadImageFile[]" onchange="showImageHereFunc();" multiple/>
          <label class="custom-file-label" for="chooseFile">Select file</label>
        </div>
        <input type="submit" name="uploadImage" class="btn btn-primary btn-block mt-4" value="Upload"/>
      </form>
      <div class="user-image mb-3 text-center">
        <div id="showImageHere">
          <div class="card-group">
            <div class="row">
              <!-- Image preview -->
            </div>
          </div>    
        </div>
      </div>
    </div>
  </body>
</html>

<html>

<head>

<style>

.container {

max-width: 600px;

}

.card{

float: left;

}

</style>

</head>

<body>

<label class="custom-file-label" for="chooseFile">Select file</label>

</div>

</form>

</div>

</body>

</html>

Code Explanations:

Here we create a form with enctype="multipart/form-data" and ID id="imageInputForm" for upload the image using JS. On JS script we use this ID.
Use name attribute with an array type for taking multiple files on the same input type.

Now we create a JS script where we preview the image before upload and call PHP script which uses for upload the file into the directory.

JS Script (show.js)

$(document).ready(function() { 
  $('#imageInputForm').ajaxForm(function() {
    alert("Uploaded!");
   }); 
});
function showImageHereFunc() {
  var total_file=document.getElementById("uploadImageFile").files.length;
  for(var i=0;i<total_file;i++) {
    $('#showImageHere').append("<div class='card col-md-4'><img class='card-img-top' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
  }
}

$(document).ready(function() {

$('#imageInputForm').ajaxForm(function() {

alert("Uploaded!");

});

function showImageHereFunc() {

var total_file=document.getElementById("uploadImageFile").files.length;

for(var i=0;i<total_file;i++) {

$('#showImageHere').append("<div class='card col-md-4'><img class='card-img-top' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");

}

Code Explanations:

Here we create the first function to submit the form when you click on the Upload button.
And showImageHereFunc() use for getting multiple images and show before upload.
On the showImageHereFunc(), we create a loop for taking multiple images and createObjectURL function for generating temporary URL to show images.

PHP Script (create_photo_gallery.php)

<?php
if(isset($_POST['uploadImage'])) {
  for($i=0;$i<count($_FILES["uploadImageFile"]["name"]);$i++) {
    $uploadfile=$_FILES["uploadImageFile"]["tmp_name"][$i];
    $folder="photo_gallery/";
    move_uploaded_file($_FILES["uploadImageFile"]["tmp_name"][$i], "$folder".$_FILES["uploadImageFile"]["name"][$i]);
  }
  exit();
}
?>

<?php

if(isset($_POST['uploadImage'])) {

for($i=0;$i<count($_FILES["uploadImageFile"]["name"]);$i++) {

$uploadfile=$_FILES["uploadImageFile"]["tmp_name"][$i];

$folder="photo_gallery/";

move_uploaded_file($_FILES["uploadImageFile"]["tmp_name"][$i], "$folder".$_FILES["uploadImageFile"]["name"][$i]);

}

exit();

}

Code Explanations:

First, we check the submit button is clicked or not using isset() function.
Create a loop for taking multiple images from an HTML form.
And use move_uploaded_file() function for uploading all images into the directory.