Upload Multiple Images using jQuery, PHP & MySQL

After getting huge response for the file upload tutorials like Image Upload without Page Refresh with PHP and jQuery and Drag and Drop File Upload using jQuery and PHP and Image Upload and Crop in Modal with PHP and jQuery and many requests for the tutorial to upload multiple images using PHP and jQuery. 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
$uploaded_images = array();
foreach($_FILES['upload_images']['name'] as $key=>$val){
$upload_dir = "uploads/";
$upload_file = $upload_dir.$_FILES['upload_images']['name'][$key];
$filename = $_FILES['upload_images']['name'][$key];
if(move_uploaded_file($_FILES['upload_images']['tmp_name'][$key],$upload_file)){
$uploaded_images[] = $upload_file;
$insert_sql = "INSERT INTO uploads(id, file_name, upload_time)
VALUES('', '".$filename."', '".time()."')";
mysqli_query($conn, $insert_sql) or die("database error: ". mysqli_error($conn));
}
}
?>



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

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


You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]