Multiple Images upload using JavaScript AJAX, and PHP

In this tutorial, we will learn How to Upload Multiple Images using Javascript Ajax and PHP with an example.

Upload Multiple Files using JavaScript Ajax and PHP



Creating a index.htmlfile.

Create a one file type input element, for selecting multiple files add multiple  Attribute. also assigned a unique ID id="files" in it.

Create a button, Call a uploadFile() function on clicking on it. we will call an AJAX in uploadFile() function.

  <form method="post" enctype="multipart/form-data">
    <input type="file" name="upload[]" id="files" multiple>   
    <button type="button" id="upload" name="uploadBtn" onclick="uploadFile();"> Upload</button>
  <div id='preview'>


Create an FormData object and count total files are been selected. Loop on the selected files and append them in form_data.

we use the open() method of the XMLHttpRequest object to send a request to the server and Handle AJAX successful callback with onreadystatechange() method.

We will render uploaded images on the front-end, in <div class='preview' > element.

Multiple Files upload using JavaScript – Script

  <script type="text/javascript">
   function uploadFile() {

      var formData = new FormData();
      // Read selected files
      var totalFiles = document.getElementById('files').files.length;
      for (var i = 0; i < totalFiles; i++) {
        formData.append("files[]", document.getElementById('files').files[i]);
      var xhttp = new XMLHttpRequest();
      // Set POST method and ajax file path"POST", "ajaxfile.php", true);
      // call on request changes state
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          var response = this.responseText;
          const filesArray = JSON.parse(response);
          var html = '';
          for (var index = 0; index < filesArray.length; index++) {
            var src = filesArray[index];
            html += '<img src="' + src + '" width="200px;" height="200px">';
          document.getElementById("preview").innerHTML = html;
      // Send request with data



Create a ajaxfile.php file.

First, we Count the total files, Loop on the files.

Then we initialize $valid_ext Array with valid image extensions. Check if the file extension exists in $valid_ext Array. If it exists then upload the file and initialize $files_arr Array with $path.

Return $files_arr in JSON format for rendering uploaded images on the frontend.

// Count total files
$countFiles = count($_FILES['files']['name']);

// Upload directory
$upload_location = "upload/";

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

//Loop through each file
for ($i = 0; $i < $countFiles; $i++) {

    if (isset($_FILES['files']['name'][$i]) && $_FILES['files']['name'][$i] != '') {
        // Get the file name
        $filename = $_FILES['files']['name'][$i];

        // 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)) {

            // Setup The destination of the moved file.
            $path = $upload_location . $filename;

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

echo json_encode($files_arr);


Download source code

Be First to Comment

Leave a Reply

Your email address will not be published.