Skip to content

How To Upload Multiple Images With Jquery Ajax

This tutorial is very useful for those who just started developing in the PHP field and it’s a very common script. You can find lots of similar scripts in the world wide web, but I am posting for you and I hope this code becomes helpful to your project.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Step 1:

Follow this folder structure.

css

-- style.css

js

-- jquery-1.8.3

uploads

ajax.php 
index.php 
loader.gif

 Step 2:

Include bellow jQuery library and stylesheet in your index.php file.

<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

Step 3:

Add bellow ajax + html code to your index.php file.

<script type="text/javascript">
    $(window).load(function(){
        $("form[name='uploadfrm']").submit(function(event){
            event.preventDefault();
            $("#loading").show();
            
            var formData = new FormData($(this)[0]);
            console.log(formData);
            $.ajax({
                url: "ajax.php",
                type: "POST",
                data: formData,
                async: false,
                success: function(msg){
                    $("#loading").hide();
                    $('#uploadfrm')[0].reset(); // Reset form data
                },
                cache: false,
                contentType: false,
                processData: false
            });
        });            
    });
</script>

<form name="uploadfrm" id="uploadfrm" method="post" enctype="multipart/form-data" action="ajax.php">
    <div>
        <label>Upload your images:</label>
    </div> 
            
    <div id="loading" class="none">
        <img src="loader.gif" alt="Loading...."/>
    </div>
     
    <div>
        <input type="file" name="images[]" id="photoimg" multiple="true" accept="image/*" />
    </div>
    
    <div>
        <input type="submit" name="upload" id="upload" value="Submit your images" />
    </div>
</form>

 Step 4:

Create ajax.php file for upload files.

<?php
    $timestamp = time(); // Current timestamp
    $location = "uploads/"; // Location to store image
    $allow = array("jpg", "jpeg", "png"); // Allow certain filetypes on upload
    $images = $_FILES["images"]["name"]; // Get only image names from array
    $tmp_name = $_FILES["images"]["tmp_name"];

    for($i=0; $i<count($images); $i++){
        $ext = strtolower(pathinfo($images[$i], PATHINFO_EXTENSION));
        if(in_array($ext, $allow)){
            $image = strtolower($images[$i]); // Create image name with lower case
            move_uploaded_file($tmp_name[$i], $location.$timestamp.$image); // The file has been moved correctly
        }else{
            echo "Error This file ". $images[$i] ." is not allowed.";
            echo "<br />";
        }
    }
?>

Keep visiting for new stuff and give your feedback.

Happy Coding 😉

(Visited 1 times, 1 visits today)
%d bloggers like this: