Multiple image upload using jquery Ajax and Php

In this article, we will tell you how to multiple image upload using jquery Ajax and Php. Using this code we do upload multiple images without page refresh by the help of PHP, jquery and ajax.

AJAX means asynchronous javascript and XML. Ajax can send and retrieve data from a server without interfering with the display. so, here we are using ajax.

You can see the below following example.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>multiple image upload using jquery Ajax and Php - XpertPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style> .showimages img{ padding-right:10px } </style>  
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
        <div id="showimages"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12"> 
      <form id="multipleimage" name="multipleimage" method="post" enctype="multipart/form-data">
        <div class="form-group">
          <label for="email">Choose Multiple Images:</label>
          <input name="images[]" type="file" multiple /> 
        </div>
        <button type="submit" value="Submit" class="btn btn-default">Submit</button>
      </form>
   </div>
 </div>
</div>

</body>
</html>
 <script>  
 $(document).ready(function(){  
      $('#multipleimage').on('submit', function(e){  
           e.preventDefault();  
           $.ajax({  
                url: "upload.php",  
                type: "POST",  
                data: new FormData(this),  
                contentType: false,  
                processData:false,  
                success: function(data)  
                {  
                     $("#showimages").html(data);  
                     alert("Image Uploaded");  
                }  
           });  
      });  
 });  
 </script>

<!DOCTYPE html>

<head>

<title>multiple image upload using jquery Ajax and Php - XpertPhp</title>

</head>

<body>

</div>

<label for="email">Choose Multiple Images:</label>

</div>

<button type="submit" value="Submit" class="btn btn-default">Submit</button>

</form>

</div>

</body>

</html>

$(document).ready(function(){

$('#multipleimage').on('submit', function(e){

e.preventDefault();

$.ajax({

url: "upload.php",

type: "POST",

data: new FormData(this),

contentType: false,

processData:false,

success: function(data)

{

$("#showimages").html(data);

alert("Image Uploaded");

}

});

</script>

upload.php

<?php    
 $output = '';  
 if(is_array($_FILES))   
 {  
      foreach ($_FILES['images']['name'] as $name => $value)  
      {  
           $file_name = explode(".", $_FILES['images']['name'][$name]);  
           $allowed_ext = array("jpg", "jpeg", "png", "gif");  
           if(in_array($file_name[1], $allowed_ext))  
           {  
                $new_name = time() . '.' . $file_name[1];  
                $sourcePath = $_FILES['images']['tmp_name'][$name];  
                $targetPath = "images/".$new_name;  
                if(move_uploaded_file($sourcePath, $targetPath))  
                {  
                     $output .= '<img src="'.$targetPath.'" width="100px" height="100px" />';  
                }                 
           }            
      }  
      echo $output;  
 }  
 ?>

<?php

$output = '';

if(is_array($_FILES))

{

foreach ($_FILES['images']['name'] as $name => $value)

{

$file_name = explode(".", $_FILES['images']['name'][$name]);

$allowed_ext = array("jpg", "jpeg", "png", "gif");

if(in_array($file_name[1], $allowed_ext))

{

$new_name = time() . '.' . $file_name[1];

$sourcePath = $_FILES['images']['tmp_name'][$name];

$targetPath = "images/".$new_name;

if(move_uploaded_file($sourcePath, $targetPath))

{

$output .= '<img src="'.$targetPath.'" width="100px" height="100px" />';

}

echo $output;

}