How to Upload Multiple Files using AJAX, jQuery, and PHP

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

Multiple Files Upload using jQuery 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, assigned an id="upload" id attribute. Triggers AJAX call by clicking on this button.

 <form method="post" enctype="multipart/form-data">
    <input type="file" name="upload" id="files" multiple>    
    <button type="button" id="upload" name="uploadBtn"> Upload</button>
  <div class='preview'>


Create an FormData object and count total files are been selected.

Loop on the selected files and append them in form_data.

On AJAX successful callback, we render uploaded images on the frontend, for that we loop on the response to get the file path and Append it in <div class='preview' > element with <img > element.

Multiple Files upload using Ajax jQuery- Script

  <script type="text/javascript">
    $('#upload').on('click', function(e) {
      var form_data = new FormData();
      // Read selected files
      var totalFiles = document.getElementById('files').files.length;
      for (var i = 0; i < totalFiles; i++) {
        form_data.append("files[]", document.getElementById('files').files[i]);
        url: 'ajaxfile.php', // <-- point to server-side PHP script 
        dataType: 'text',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'post',
        success: function(response) {
          const filesArray = JSON.parse(response);
          for (var index = 0; index < filesArray.length; index++) {
            var src = filesArray[index];
            // Add img element in <div class='preview'>
            $('.preview').append('<img src="' + src + '" width="200px;" height="200px">');


Create a ajaxfile.php file and a uploads directory to store files.

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.