In this tutorial, We will learn how to upload multiple images using ajax jquery in PHP. multiple image upload without page refresh using jquery ajax in PHP.


Example:

Create index.php file include jquery and bootstrap files via cdn. send the request to upload.php file via jquery ajax and upload document on server.


index.php

<!DOCTYPE html>
<html>
    <head>
        <title>Multiple Image Upload Using JQuery Ajax In PHP</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="showimages"></div>
                </div>
                <div class="col-md-8 offset-3 mt-5">
                    <div class="card">
                        <div class="card-header bg-info">
                            <h6 class="text-white">Multiple Image Upload Using JQuery Ajax In PHP</h6>
                        </div>
                        <div class="card-body">
                            <form class="image-upload" method="post" action="" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label><strong>Image :</strong></label>
                                    <input type="file" name="images[]" multiple="multiple" class="form-control">
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success btn-sm">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.image-upload').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(data);
                        }

                    });
                });
            });
        </script>
    </body>
</html>



upload.php

<?php 
    $output = '';
    if(is_array($_FILES)){
        foreach ($_FILES['images']['name'] as $key => $value) {
            $file_name = explode(".", $_FILES['images']['name'][$key]);
            $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'][$key];
                $targetPath = "images/".$new_name;  
                if(move_uploaded_file($sourcePath, $targetPath))
                {  
                     $output .= '<img src="'.$targetPath.'" width="100px" height="100px" />';
                }
            }
        }
        echo $output;
    }
?>


Finally, you can create images directory to save your image in root document.


Thanks, May this example will help you.