Skip to main content

Upload Multiple Images with jQuery Ajax and PHP

In our previous tutorial you have learned how to upload multiple images in CodeIgniter and get huge response from readers. Today in this tutorial, you will learn how to upload multiple images with jQuery Ajax and PHP. The tutorial is explained in easy steps with live demo to upload multiple images without page refresh and uploaded image preview. The functionality is also handled to insert uploaded images detail into MySQL database table. You can download source code of live demo, the link to download source code is available at the end of tutorial.

So let’s start the coding, we will have following file structure for the example to upload multiple images with jQuery Ajax and PHP.

  • index.php
  • upload_image.js
  • upload_image.php

Steps1: Include Bootstrap, jQuery files
As we will create image upload form with Bootstrap and handle form submit with jQuery Form plugin, so we will include files related to this.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript" src="scripts/upload_image.js"></script>

Steps2: Design Image upload Form
Now we will design multiple image upload form with Bootstrap in index.php.

<div class="container">
	<h2>Upload Multiple Images with jQuery Ajax and PHP</h2>		
	<form method="post" name="image_upload_form" id="image_upload_form" enctype="multipart/form-data" action="upload_image.php">   
    <label>Choose Multiple Images to Upload</label>
	<br>
	<br>
    <input type="file" name="images[]" id="upload_files" multiple >
    <div class="image_uploading hidden">
        <label> </label>
        <img src="image_upload_status.gif" alt="Image Uploading......"/>
    </div>
	</form>
	<div id="images_preview"></div>		
</div>

Steps3: Handle Imsge Upload Form Submit with jQuery Ajax
In upload_image.js, we will handle functionality to submit form to upload_image.php on change event to upload multiple images.

$(document).ready(function(){
    $('#upload_files').on('change',function(){
        $('#image_upload_form').ajaxForm({           
            target:'#images_preview',
            beforeSubmit:function(e){
                $('.image_uploading').show();
            },
            success:function(e){
                $('.image_uploading').hide();
            },
            error:function(e){
            }
        }).submit();
    });
});

Steps4: Handle Multiple Image Upload at Server End
Now in upload_image.php, we will handle functionality to upload multiple image to server and also insert uploaded images details into MySQL database table.

<?php
$images = array();
foreach($_FILES['images']['name'] as $key=>$val){        
	$upload_dir = "uploads/";
	$upload_image = $upload_dir.$_FILES['images']['name'][$key];
	$file_name = $_FILES['images']['name'][$key];
	if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$upload_image)){
		$images[] = $upload_image;
		// insert uploaded images details into MySQL database.
		$insert_sql = "INSERT INTO uploads(id, file_name, upload_time) 
			VALUES('', '".$file_name."', '".time()."')";
		mysqli_query($conn, $insert_sql) or die("database error: ". mysqli_error($conn));
	}
}
?>

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *

Shares