Upload Multiple Image with jQuery, PHP & MySQL

Image upload is an important functionality of any web project. The image upload functionality is needed in web projects to upload user profile picture or upload logo or manage image gallery etc. If we need to implement user profile picture or logo then we only allow to upload a single image. But we need to allow multiple image upload when uploading files in image gallery,

As in n our previous tutorial you have learned how to upload multiple images in CodeIgniter and get huge response from readers. So in this tutorial, you will learn how to upload multiple images with jQuery, PHP and MySQL.

The tutorial is covered 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.

Upload Multiple Images with jQuery Ajax and PHP

Also, read:

Image Upload and Crop in Modal with jQuery, PHP & MySQL

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));
	}
}
?>

You may also like:

Demo Download

One thought on “Upload Multiple Image with jQuery, PHP & MySQL”