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:

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:

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

6 thoughts on “Upload Multiple Images using jQuery, PHP & MySQL

  1. Hoow do i retrieve this picture again form the database, since you didnt use BLOB.. sorry im new to coding..

    1. As we have uploaded file to server into a directory and also insert same image name into database table, So you just need to get image name from database and then create path to uploaded directory to use images. Thanks!

  2. Hi Sir,
    Thanks for your tutorial.. Its works perfectly..
    The only thing i want to change is the upload button…
    The images are automatically uploading as soon as i click on choose files button..
    I want an another button to upload the images..
    Reply ASAP..
    Thanks in advance.

    1. Currently the upload form submit handled on jQuery change event of file input. If you want to upload images after upload button click, you need submit upload form on button click instead of file change event. Thanks!

Comments are closed.