How to Upload Multiple Files Using jQuery Ajax in PHP?

Uploading multiple files efficiently is a common requirement in web applications. In this tutorial, we will guide you on how to upload multiple files using jQuery AJAX in PHP. This method allows you to upload files asynchronously without refreshing the page, improving user experience. We will use jQuery to handle the AJAX request and PHP to process the uploaded files. Follow this step-by-step guide to implement multiple file uploads seamlessly in your PHP project.

Why Use jQuery AJAX for File Uploads?

Here’s why jQuery AJAX is a great choice for handling multiple file uploads:

No Page Reloads – Users can continue browsing while files are uploaded in the background.
Faster Processing – Reduces server load and improves website speed.
Better User Experience – Provides instant feedback for file uploads.
More Control – Allows validation, file type restrictions, and progress tracking.

Now, let’s dive into the implementation.

Detailed Guide About Upload Multiple Files Using jQuery Ajax in PHP

I am hoping you guys have installed Xampp or Wampp in your system. If not then here is the link to download that First:

Why Do We Need XAMPP or WAMP for Running PHP?

When developing PHP applications, you need a server environment to execute PHP scripts. PHP is a server-side scripting language, which means it cannot run directly in a browser like HTML, CSS, or JavaScript. This is where XAMPP and WAMP come in—they provide a local server setup that allows you to run PHP scripts on your computer.

After installing Xampp or Wamp, go to the htdoc folder (for Xampp) and the www folder (for Wamp) and create a folder. Create files called “ajax.php” and “uploads.php” and a folder for uploading images with the name “Uploads.”

code For ajax.php file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Multiple Image Upload</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .gallery img {
            width: 100px;
            height: auto;
            margin: 5px;
            border-radius: 5px;
        }
        .error {
            color: red;
            display: block;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div>
        <input type="file" name="multiple_image_uploads[]" accept=".jpg, .jpeg, .png, .gif" multiple id="image_field">
        <input type="submit" value="Submit" id="btn-file-submit">
    </div>
    <div class="gallery"></div>

    <script>
      
      $(document).ready(function(){
    $('#btn-file-submit').on('click', function(e){
        e.preventDefault();
        var files = $('#image_field')[0].files;

        if(files.length === 0) {
            $('.error').remove();
            $('#image_field').after('<span class="error">Please upload at least one image.</span>');
            return;
        }

        $('.error').remove();
        var formData = new FormData();
        
        for(var i = 0; i < files.length; i++) {
            formData.append('files[]', files[i]);
        }
        $.ajax({
            url: 'upload.php', 
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                $('.gallery').html(response); 
            },
            error: function() {
                alert('Error uploading images.');
            }
        });
         
   
    });
});

    </script>
</body>
</html>

Upload Multiple Files using jQuery Ajax in PHP

Explanation Of Code:

Firstly, I have used simple CSS. You can add your own. I recommend creating separate CSS and Js files for better practice.

Step 1: jQuery CDN

We are going to use JQuery and Ajax, so our first work is to add the CDN link to our file. We can also create a file and then paste the source code from the URL.

Step 2: CSS

If you did not create any CSS File, you can write the CSS in the head tag. So, I have designed the uploaded image a little bit with width and height. I have made the error message color red. So It will be visible to the user as we know for the error we use red color.

Step 3: HTML

For any type of file upload, we use the <input type="file"/> tag. If someone wants to upload multiple files, they need to add the multiple attribute. Since we want to display all uploaded images to the user, we use an array to store them. Additionally, a submit button is used to upload the images.

I have also included <div class="gallery"></div> in the HTML. This container will be used to display the uploaded images dynamically when the AJAX response is received.

Step 4: JQuery

I have used the “onClick ” event whenever someone clicks on the upload or submit button this function will be triggered. after that using “preventfault”

How the File Upload Process Works

Prevent Default Form Submission: We override the default form submission to handle file uploads using AJAX.
Validate Input Field: An error message is displayed if no files are selected.
Use FormData to Store Files: The FormData object is used to collect all selected images dynamically.
Loop Through Files: The script iterates over all uploaded files and appends them to FormData.
Send Data Using AJAX: The files are sent to upload.php via a POST request.
Process AJAX Response: If successful, the uploaded images are displayed in the gallery; otherwise, an error message is shown.

Code of Upload.php File:

<?php
if(!empty($_FILES['files']['name'][0])) {
    $uploadDir = 'uploads/';
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }
    $output = '';
    foreach($_FILES['files']['tmp_name'] as $key => $tmp_name) {
        $fileName = basename($_FILES['files']['name'][$key]);
        $targetFile = $uploadDir . $fileName;

        if(move_uploaded_file($tmp_name, $targetFile)) {
            $output .= '<img src="'.$targetFile.'" alt="'.$fileName.'">';
        }
    }
    
    echo $output;
}
?>

PHP

Explanation of Code:

Check if Files Are Selected
- The script first verifies if at least one file is uploaded using !empty($_FILES['files']['name'][0]).
Create an Upload Directory (If Not Exists)
- The uploads/ folder is set as the destination for uploaded files.
- If the folder does not exist, it is created using mkdir($uploadDir, 0777, true).
Loop Through Uploaded Files
- Since multiple files can be uploaded, a loop runs through $_FILES['files']['tmp_name'].
- The temporary name of each file is accessed using $tmp_name.
Move Files to the Upload Directory
- The original file name is retrieved using basename($_FILES['files']['name'][$key]).
- The file is moved from the temporary folder to the uploads/ directory using move_uploaded_file().
Generate Image Tags for Display
- If the file is successfully uploaded, an <img> tag is created to display the uploaded image.
- The images are stored in the $output variable.
Return Uploaded Images to AJAX
- The $output variable is echoed, which AJAX receives and displays inside the .gallery div.

OUTPUT:

Related Posts:

>>How to Use Ajax in WordPress?

>>How to Resize an image in PHP?

Conclusion: Upload Multiple Files using jQuery Ajax in PHP

Uploading multiple files using jQuery AJAX in PHP enhances the user experience by allowing seamless file uploads without refreshing the page. Using the FormData object, we efficiently send multiple files to the server, where PHP processes and stores them. The use of AJAX ensures quick responses, improving performance and usability. This method is ideal for applications that require bulk file uploads, such as image galleries or document management systems. Implementing proper validation and security measures, like file type restrictions, can further enhance this functionality.