Upload Multiple Images using jQuery, PHP & MySQL

File upload is an important part of web application. There are also image galllery are developed to allow users to upload images and manage image gallery. So if you’re looking for functionality to implement multiple image upload, then you’re here at the right place. In this tutorial, We have explained, how to implement functionality to upload multiple images using PHP and jQuery.

Also, read:

• Reduce or Compress Image Size While Uploading in PHP
• Image Upload without Page Refresh with PHP and jQuery
• Amazon S3 File Upload using PHP
• Angular Multiple File Upload with PHP and MySQL
• Create Thumbnails While Uploading Images with PHP & jQuery
• Amazon S3 File Upload using JavaScript

So in this tutorial you will learn how to upload multiple images using PHP, jQuery and MySQL. The tutorial has been covered in very easy steps with live Demo link and can downloads the source code from the Download link.

So let’s start the coding. We will have following file structure for this tutorial

• index.php
• upload.js
• upload.php
• style.css

Steps1: Create Database Table
In this tutorial we will insert multiple uploaded images into MySQL Database. So we need to create MySQL database table to store images details. Here we will create uploads table to store uploaded files details.

CREATE TABLE IF NOT EXISTS `uploads` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`file_name` varchar(255) NOT NULL,
`upload_time` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB;

Steps2: Create Database Connection
After creating MySQL database table, we will create db_connect.php file to make connection with MySQL database.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "phpzag_demos";
$conn = mysqli_connect($servername, $username, $password, $dbname);
?>

Steps3: Include jQuery Files
We will include following jQuery files to handle form submit for multiple file upload and CSS to display upload images.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript" src="scripts/upload.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />

Step4: Create File Upload Form HTML
We will create file upload Form HTML in index.php with HTML to display uploaded images.

<div class="container">
	<h2>Upload Multiple Images using jQuery, Ajax and PHP</h2>
	<br>
	<br>	
	<form method="post" name="upload_form" id="upload_form" 
enctype="multipart/form-data" action="upload.php">   
    <label>Choose Multiple Images to Upload</label>
	<br>
	<br>
    <input type="file" name="upload_images[]" id="image_file" multiple >
    <div class="file_uploading hidden">
        <label> </label>
        <img src="uploading.gif" alt="Uploading......"/>
    </div>
	</form>
	<div id="uploaded_images_preview"></div>
</div>

Steps5: Handle Form Submit with jQuery Form
In upload.js, we will handle form submit jQuery Form. Also handle displaying uploading progress bar image and upload image preview.

$(document).ready(function(){
    $('#image_file').on('change',function(){
        $('#upload_form').ajaxForm({           
            target:'#uploaded_images_preview',
            beforeSubmit:function(e){
                $('.file_uploading').show();
            },
            success:function(e){
                $('.file_uploading').hide();
            },
            error:function(e){
            }
        }).submit();
    });
});

Steps6: Handle Multiple Image Upload and Insert using PHP
Finally in upload.php file. we will handle multiple image upload using PHP. We will also handle functionality to insert uploaded image details into MySQL database table.

<?php
$uploadedImages = array();
foreach($_FILES['uploadImage']['name'] as $key=>$val){        
	$uploadDir = "uploads/";
	$uploadFile = $uploadDir.$_FILES['uploadImage']['name'][$key];
	$filename = $_FILES['uploadImage']['name'][$key];
	$extension = pathinfo($_FILES['uploadImage']['name'][$key], PATHINFO_EXTENSION);
	if($extension=='jpg' || $extension=='jpeg' || $extension=='png' || $extension=='gif') {
		if(move_uploaded_file($_FILES['uploadImage']['tmp_name'][$key], $uploadFile)){
			$uploadedImages[] = $uploadFile;
			$insertSql = "INSERT INTO uploads(id, file_name, upload_time) 
				VALUES('', '".$filename."', '".time()."')";
			mysqli_query($conn, $insertSql) or die("database error: ". mysqli_error($conn));
		}
	} else {
		echo '<br><br><div class="text-danger">Only images file allowed.</div>';
	}
}
?>

Now we will use below code in upload.php to display uploaded images preview.

<div class="row">
	<div class="gallery">
		<?php
		if(!empty($uploadedImages)){ 
			foreach($uploadedImages as $image){ ?>
			<ul>
				<li >
					<img class="images" 
src="<?php echo $image; ?>" alt="">
				</li>
			</ul>
		<?php }	}?>
	</div>
</div>

You may also like:

• Star Rating System with Ajax, PHP and MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Your Own CAPTCHA Script with PHP
• Convert Unix Timestamp To Readable Date Time in PHP
• Inventory Management System with Ajax, PHP & MySQL
• Create Live Editable Table with jQuery, PHP and MySQL
• Live Add Edit Delete datatables Records with Ajax, PHP and MySQL
• Stripe Payment Gateway Integration in PHP
• Export Data to Excel with PHP and MySQL
• Star Rating System with Ajax, PHP and MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• How To Create Simple REST API in PHP

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download