Skip to content

All topics  /  jQuery

Multiple Image Upload Using JQuery Ajax In PHP

jQuery ·

When “Multiple Image Upload Using JQuery Ajax In PHP” moves through design, development and browser testing, benefits using time card calculator manage your can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys,

Today, I would like to share with you how to upload multiple image using ajax jquery in php. multple image uplaod without page refresh using jquery ajax in php.

This Tutorial will help to learn JQuery Ajax multiple images upload example in PHP with demo. demo of display selected multiple images preview.we will show you how to upload multiple images without page refresh using jQuery, Ajax, and PHP. Ajax multiple image upload allows the user to select multiple image files at once and upload all the images to the folder in a single click.

We will have multiple file input options in a form. Images to be uploaded will be chosen using those input fields. Then using jQuery AJAX the multiple images will be uploaded to the backend code.

index.php


<!DOCTYPE html>
<html>
<head>
    <title>Multiple Image Upload Using JQuery Ajax In PHP - NiceSnippets.com</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-6 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 - NiceSnippets.com</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 text-center">
                                <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;
    }
?>

It will help you...

More on this topic