Steps to 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.

Output:

Here is the complete source code file for Upload Multiple Images in PHP with Preview.

[wpdm_package id=’2660′]

Have you any issue with the complete script you can contact me via mail or on the comment box.

Know more: https://www.php.net/manual/en/features.file-upload.multiple.php

Also Check:

Happy Coding..!

Was this article helpful?

YesNo

2 thoughts on “Steps to Upload Multiple Images in PHP with Preview”

Complete User Login & Registration System using PHP MySQL With Image Upload | PHPCODER.TECH says:

January 12, 2021 at 12:13 am

[…] Steps to Upload Multiple Images in PHP with Preview […]

How to Get HTML Tag Value in PHP - PHPCODER.TECH says:

January 17, 2021 at 6:44 pm

[…] Steps to Upload Multiple Images in PHP with Preview […]

Steps to Upload Multiple Images in PHP with Preview

3 Simple Steps to Upload Multiple Images in PHP

HTML Form (index.php)

JS Script (show.js)

PHP Script (create_photo_gallery.php)

Output:

By Bikash

Related Post

2 thoughts on “Steps to Upload Multiple Images in PHP with Preview”

Leave a Reply Cancel reply

You Missed

5 Most Effective Ways To Optimize PHP Code

Debugging in PHP: A Comprehensive Guide with Examples

3 popular ways to make HTTP requests in JavaScript

PHP: Logout From All Devices on Password Change