How to upload Multiple Image files with jQuery AJAX and PHP

Uploading a file without page refresh is a more user-friendly way than refreshing the whole page.

It allows displaying image preview instantly after upload.

You can upload single or multiple files using jQuery AJAX.

In this tutorial, I show how you can upload multiple image files and display preview after upload using jQuery AJAX and PHP.

How to upload Multiple Image files with jQuery AJAX and PHP


Contents

  1. HTML
  2. Script
  3. PHP
  4. Output
  5. Conclusion

1. HTML

Create a <form >.

Add a file element and a button in it.

For enabling multiple file selection added multiple attribute and name as Array type (name='files[]').

Use <div id='preview'> to show image preview using jQuery AJAX after successfully upload.

Completed Code

<style type="text/css">
#preview img{
   margin: 5px;
}
</style>
<form method='post' action='' enctype="multipart/form-data">
   <input type="file" id='files' name="files[]" multiple><br>
   <input type="button" id="submit" value='Upload'>
</form>

<!-- Preview -->
<div id='preview'></div>

2. Script

On upload button click create FormData() object and count total files are been selected.

Loop on the selected files and append in form_data.

Send AJAX POST request to ajaxfile.php. Pass form_data as data, set dataType: 'json', contentType: false, and processData: false.

On AJAX successful callback loop on the response to get the file path.

Append <img > element in <div id='preview' > where use src variable in img src attribute.

Completed Code

$(document).ready(function(){

$('#submit').click(function(){

   var form_data = new FormData();

   // Read selected files
   var totalfiles = document.getElementById('files').files.length;
   for (var index = 0; index < totalfiles; index++) {
      form_data.append("files[]", document.getElementById('files').files[index]);
   }

   // AJAX request
   $.ajax({
     url: 'ajaxfile.php', 
     type: 'post',
     data: form_data,
     dataType: 'json',
     contentType: false,
     processData: false,
     success: function (response) {

       for(var index = 0; index < response.length; index++) {
         var src = response[index];

         // Add img element in <div id='preview'>
         $('#preview').append('<img src="'+src+'" width="200px;" height="200px">');
       }

     }
   });

});

});

3. PHP

Create an ajaxfile.php file and a uploads folder to store files.

Count total files, assign upload location to $upload_location, and create a $files_arr Array to store file path after file upload.

Loop on the files.

Initialize $valid_ext Array with valid image extensions.

Check if the file extension exists in $valid_ext Array. If exists then upload the file and initialize $files_arr Array with $path.

Return $files_arr in JSON format for image preview.

Completed Code

<?php
// Count total files
$countfiles = count($_FILES['files']['name']);

// Upload Location
$upload_location = "uploads/";

// To store uploaded files path
$files_arr = array();

// Loop all files
for($index = 0;$index < $countfiles;$index++){

   if(isset($_FILES['files']['name'][$index]) && $_FILES['files']['name'][$index] != ''){
      // File name
      $filename = $_FILES['files']['name'][$index];

      // Get extension
      $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));

      // Valid image extension
      $valid_ext = array("png","jpeg","jpg");

      // Check extension
      if(in_array($ext, $valid_ext)){

         // File path
         $path = $upload_location.$filename;

         // Upload file
         if(move_uploaded_file($_FILES['files']['tmp_name'][$index],$path)){
            $files_arr[] = $path;
         }
      }
   }
}

echo json_encode($files_arr);
die;

4. Output

View Output


5. Conclusion

In the example, I used jQuery AJAX for uploading image files only but you can allow other files upload by specifying file extension in $valid_ext variable.

But you need to modify the file preview code.

If you found this tutorial helpful then don't forget to share.