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.


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.


<!DOCTYPE html>
        <title>Multiple Image Upload Using JQuery Ajax In PHP</title>
        <script src="" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
        <script src="" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="showimages"></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 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 class="form-group">
                                    <button type="submit" class="btn btn-success btn-sm">Save</button>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.image-upload').on('submit', function (e) {
                        url: "upload.php",
                        type: "post",
                        data: new FormData(this),
                        contentType: false,
                        processData: false,
                        success: function (data) {



    $output = '';
        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.