Upload multiple images using jQuery, Ajax and PHP


We’ve received many requests from followers for publishing the tutorial on How to upload multiple images without refreshing the page. We’ll try to simplify the multiple images upload without refreshing the page. In this simple tutorial, we’ll discuss multiple images uploads using jQuery, Ajax and PHP. Using our script, you can upload multiple images at once without page refresh using jQuery, Ajax and PHP.

We’ll show you two ways to display images after upload. Once the images are uploaded to the server via jQuery, you can display images without stored in a folder or stored in a folder. This script is very short, easy and useful which can easily be implemented in your web projects.

Read the following step-by-step guide to understanding the whole process of Upload multiple images using jQuery, Ajax and PHP. Also, you can see the live demo from the Demo link and download the source code from the Download link at the end of the tutorial.

screenshot-multiple_images_upload_jquery_ajax_php

index.html File

index.html file contains some JavaScript and HTML codes. All codes are given below.

JavaScript Code:
At first include the two external JavaScript library files, jquery.min.js and jquery.form.js. jquery.min.js is the main jQuery library and another jquery.form.js file is used to submit the form with files for uploading using jQuery Ajax.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

Now write some JavaScript code for form submission and displaying the uploaded images.

<script type="text/javascript">
$(document).ready(function(){
    $('#images').on('change',function(){
        $('#multiple_upload_form').ajaxForm({
            //display the uploaded images
            target:'#images_preview',
            beforeSubmit:function(e){
                $('.uploading').show();
            },
            success:function(e){
                $('.uploading').hide();
            },
            error:function(e){
            }
        }).submit();
    });
});
</script>

HTML Code

Input file field name is defined as an array for accept multiple file name and also used multiple attributes for multiple upload support.

<form method="post" name="multiple_upload_form" id="multiple_upload_form" enctype="multipart/form-data" action="upload.php">
    <input type="hidden" name="image_form_submit" value="1"/>
    <label>Choose Image</label>
    <input type="file" name="images[]" id="images" multiple >
    <div class="uploading none">
        <label>&nbsp;</label>
        <img src="uploading.gif" alt="uploading......"/>
    </div>
</form>

Create div with target id which is defined at the above JavaScript code. The uploaded images would be displayed at this div. Also you can change this div id, but remember that the JavaScript target option value (target:'#images_preview') will be same with this div id.

<div id="images_preview"></div>

upload.php file:

upload.php file contain some PHP codes for process the uploading and generates the images view. There are two way to upload images and display the images.

 One Way is to create a folder named uploads/. Upload the images and stored in the folder.

<?php
    $images_arr 
= array();
    foreach(
$_FILES['images']['name'] as $key=>$val){
        
//upload and stored images
        
$target_dir "uploads/";
        
$target_file $target_dir.$_FILES['images']['name'][$key];
        if(
move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){
            
$images_arr[] = $target_file;
        }
    }
?>

 You can upload the images and display the images without stored in the folder.

<?php
    $images_arr 
= array();
    foreach(
$_FILES['images']['name'] as $key=>$val){
        
//display images without stored
        
$extra_info getimagesize($_FILES['images']['tmp_name'][$key]);
        
$images_arr[] = "data:" $extra_info["mime"] . ";base64," base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));
    }
?>

Generate images view
After uploading the images we need to generate the view. This view will display at the target div.

<?php
if(!empty($images_arr)){ 
    foreach(
$images_arr as $image_src){ ?> <ul> <li > <img src="<?php echo $image_src; ?>" alt=""> </li> </ul> <?php }
}
?>

Conclusion

This tutorial and script helps to upload multiple images using jQuery Ajax and PHP. If you’re looking the advanced uploading feature in your web project, you can implement Drag and drop file upload using Dropzone JS and PHP. Otherwise, for simple image upload, you can Upload an image and create thumbnail using PHP.

27 Comments

  1. Shubham Said...

Leave a reply

Connect With CodexWorld