Upload Multiple Images using jQuery Ajax and PHP

Image upload functionality is normally used in web applications and can be quickly implemented using PHP. But if you want to implement image upload functionality without refreshing the page, jQuery and AJAX are required with PHP. Image uploading without refreshing the page gives a user-friendly interface to web applications. By the Ajax file upload, the user can upload images without reloading or refreshing the current page.

Usually, the file input field uploads the same image at a time. But in some cases, your web application requires the user to upload various images at one. In this tutorial, we will tell you how to upload multiple images without refreshing the page using jQuery, Ajax and PHP. Ajax Multiple Image Upload enables the user to select multiple image files at once and upload all the images to the server in one click.

We are using JQuery Form plugin to post data files through Ajax. This lets you update the HTML file upload form to use AJAX. So, include the jQuery Library and jQuery Form plugin to submit the form with the files to upload using jQuery Ajax.

The AJAXForm method of the JQuery Form plugin prepares HTML forms for AJAX submissions. Any $ .ajax option in the AJAXForm() function can be passed.

target – Define element(s) to update with the server response.
beforeSubmit – Callback function that requested before form submission.
success – Callback function that requested after the response has been returned from the server.
error – Callback function that requested if an error occurred.

Javascript Code:

<script>
$(document).ready(function(){
    $('#submitForm').ajaxForm({
        target:'#imagesPrev',
        beforeSubmit:function(){
            $('#status').html('<img src="image.gif"/>');
        },
        success:function(){
            $('#imgs').val('');
            $('#status').html('');
        },
        error:function(){
            $('#status').html('Images uploading failed, please try again.');
        }
    });
});
</script>

HTML Code:

<form method="post" id="submitForm" enctype="multipart/form-data" action="upload.php">
    <label>Choose Images</label>
    <input type="file" name="images[]" id="imgs" multiple >
    <input type="submit" name="submit" value="UPLOAD"/>
</form>
<div id="status"></div>

<div class="gallery" id="imagesPrev"></div>

PHP  Code: (upload.php)

<?php
if(isset($_POST['submit'])){

    $target_dir = "uploads/";
    $allow_types = array('jpg','png','jpeg','gif');
    
    $images_arr = array();
    foreach($_FILES['images']['name'] as $key=>$val){
        $image_name = $_FILES['images']['name'][$key];
        $tmp_name   = $_FILES['images']['tmp_name'][$key];
        $size       = $_FILES['images']['size'][$key];
        $type       = $_FILES['images']['type'][$key];
        $error      = $_FILES['images']['error'][$key];
        
        
        $file_name = basename($_FILES['images']['name'][$key]);
        $targetFilePath = $target_dir . $file_name;
        
        
        $file_type = pathinfo($targetFilePath,PATHINFO_EXTENSION);
        if(in_array($file_type, $allow_types)){    
            
            if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$targetFilePath)){
                $images_arr[] = $targetFilePath;
            }
        }
    }
    
   
    if(!empty($images_arr)){ ?>
        <ul>
        <?php foreach($images_arr as $image_src){ ?>
            <li><img src="<?php echo $image_src; ?>" alt=""></li>
        <?php } ?>
        </ul>
<?php }
}
?>