PHP Ajax Multiple Image Upload

In this section, we are going to learn about multiple image uploads in PHP. We will use Ajax and jQuery to do this. Sometimes our project needs the option of multiple image upload. If we don't have knowledge about PHP, this example will be very useful for us. This example will display the selected images. To upload multiple files, we will create two files, which is as follows:

Index.php
uploadFile.php

The index file will be useful to write the design code. In this file, we will also write the code of jQuery Ajax. When we select the image and click on the submit button, all the images will be uploaded to the folder named "media". So we have to first create the media folder. We will use our root directory to create this. The following example shows the small and fastest way to upload multiple images.

The main code to display the selected image is as follows:

$("#uploadFile").change(function(){
  $('#image_preview').html("");
  var total_file=document.getElementById("uploadFile").files.length;
  for(var i=0;i<total_file;i++)< p="" style="box-sizing: border-box;"></total_file;i++)<>
  {
   $('#image_preview').append(" ");
  }
});

The full example to display the multiple image upload selected by the users are described as follows. In our below example, we will use two files named index.php and uploadFile.php, which is shown as follows:

Example:

Index.php

<!DOCTYPE html>
<html>
<head>
  <title> Multiple Image Upload using PHP and Ajax </title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>

  <style type="text/css">
    input[type=file]{
      display: inline;
    }
    #image_preview{
      border: 1px solid black;
      padding: 10px;
    }
    #image_preview img{
      width: 200px;
      padding: 5px;
    }
  </style>

</head>
<body>

<div class="container">
  <h1> Multiple Image Upload using PHP Ajax </h1>
  <form action="uploadFile.php" method="post" enctype="multipart/form-data">
      <input type="file" id="uploadFile" name="uploadFile[]" multiple/>
      <input type="submit" class="btn btn-success" name='submitImage' value="Upload Image"/>
  </form>

  <br/>
  <div id="image_preview"></div>
</div>

</body>

<script type="text/javascript">
  
  $("#uploadFile").change(function(){
     $('#image_preview').html("");
     var total_file=document.getElementById("uploadFile").files.length;

     for(var i=0;i<total_file;i++)
     {
      $('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");
     }

  });

  $('form').ajaxForm(function() 
   {
    alert(?Successful Uploading");
   }); 

</script>
</html>

uploadFile.php

<?php

if(isset($_POST['submitImage']))
{
	for($i=0;$i<count($_FILES["uploadFile"]["name"]);$i++)
	{
		$uploadfile=$_FILES["uploadFile"]["tmp_name"][$i];
		$folder="media/";

		move_uploaded_file($_FILES["uploadFile"]["tmp_name"][$i], "$folder".$_FILES["uploadFile"]["name"][$i]);
	}
	exit();
}

?>

Now our above code is ready, and we can run it. When we run this, the following output will be generated: