How do i upload multiple images in PHP with Preview

Published October 13, 2021


In this PHP example we are going to write how to upload multiple images with php and shows the preview of each image before uploading the files. we have three easy steps to upload multiple images.

  • Create Simple HTML form with Bootstrap5 file input
  • Create a JS file to show preview of uploading images
  • Create a PHP file to upload images

 

To upload image we need input type "file" and enctype ="multipart/form-data" on form submission.

Upload multiple images with php server

 

So let's create a Form UI

Create Simple HTML form with Bootstrap5 file input

<html>
  <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <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="form-control form-control-lg" 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>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

   <script>
   $(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>");
  }
}</script>
  </body>
</html>

 

 

Create a JS file to show preview of uploading images

Now we create a javascript file which we will use to preview the image before upload the images

$(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>");
  }
}

 

Create a PHP file to upload images

<?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();
}
?>

 

Conclusion: In this php example we covered create File upload form with bootstrap5 and implemented functionality to upload multiple images with PHP

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

21 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions