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.

Step 1:

Follow this folder structure.


-- style.css


-- jquery-1.8.3



 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">
            var formData = new FormData($(this)[0]);
                url: "ajax.php",
                type: "POST",
                data: formData,
                async: false,
                success: function(msg){
                    $('#uploadfrm')[0].reset(); // Reset form data
                cache: false,
                contentType: false,
                processData: false

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

 Step 4:

Create ajax.php file for upload files.

    $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
            echo "Error This file ". $images[$i] ." is not allowed.";
            echo "<br />";

Keep visiting for new stuff and give your feedback.

Happy Coding 😉

%d bloggers like this: