Skip to main content

Multiple Image Upload with jQuery, PHP and MySQL

Updated on: coderszine team PHP, Tutorial

In our previous tutorial, we have explained how to implement crop image before upload with jQuery and PHP. In this tutorial, we will explain how to upload multiple images with progress bar using jQuery, PHP and MySQL.

Multiple image upload is a feature of web applications to allow users to upload multiple image at one time. The feature can be used with images upload in gallery etc in web projects.

The tutorial covered in easy steps with live demo to upload multiple images with progress bar and upload to server and also insert into MySQL database table. You will also find download link at the end of tutorial to download live demo source code.

Also, read:

So let’s start to create example to upload multiple images with progress bar using jQuery, PHP and MySQL.. The file structure for the example is following.

  • index.php
  • jquery_upload.js
  • image_upload.php
Steps1: Create Database Table

As we will insert uploaded images details into database, so will create MySQL database table images using below query.

CREATE TABLE `images` (
  `id` int(11) NOT NULL,
  `file_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Steps2: Include Bootstrap, jQuery and jQuery Form

As we have covered this tutorial with Bootstrap, jQuery and jQuery From plugin, so we will include files related to this.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.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 src="https://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="scripts/jquery_upload.js"></script>
Steps3: Create File Upload HTML Form with Progress Bar

In file index.php We will design multiple file upload HTML form with progress bar.

<div class="container">
	<h2>Upload Multiple Images with Progress Bar using jQuery, PHP and MySQL</h2>		
	<form method="post" name="image_upload_form" id="image_upload_form" enctype="multipart/form-data" action="image_upload.php">   
    <label>Choose Multiple Images to Upload</label>
    <input type="file" name="images_upload[]" id="image_upload" multiple >    
	</form>
	<br>
	<div class="progress" style="display:none;">
		<div class="bar"></div >
		<div class="percent">0%</div >
	</div>
	<div id="status"></div>		
</div>
Steps4: Handle File Upload Form Submit and Progress Bar

In jquery_upload.js, we will handle file upload form submit using jQuery From plugin with progress bar value update.

$(document).ready(function(){
	var bar = $('.bar');
	var percent = $('.percent');
	var status = $('#status');
	$('#image_upload').on('change',function(){   
		 $('#image_upload_form').ajaxForm({           
			beforeSend: function() {
				$(".progress").show();
				status.empty();
				var percentVal = '0%';
				bar.width(percentVal);
				percent.html(percentVal);
			},
			uploadProgress: function(event, position, total, percentComplete) {		
				var percentVal = percentComplete + '%';
				bar.width(percentVal);
				percent.html(percentVal);
			},
			success: function(data, statusText, xhr) {
				var percentVal = '100%';
				bar.width(percentVal);
				percent.html(percentVal);
				status.html(xhr.responseText);
			},
			error: function(xhr, statusText, err) {
				status.html(err || statusText);
			}    
		 }).submit();
	});   
});
Steps5: Upload Multiple Images and Insert into Database

Now finally in image_upload.php, we will handle functionality to upload multiple images to server and also into MySQL database table.

<?php
include_once("db_connect.php");
$upload_images = array();
$upload_dir = "uploads/";
foreach($_FILES['images_upload']['name'] as $key=>$val){       
	$file_path = $upload_dir.$_FILES['images_upload']['name'][$key];
	$filename = $_FILES['images_upload']['name'][$key];
	if(is_uploaded_file($_FILES['images_upload']['tmp_name'][$key])) {
		if(move_uploaded_file($_FILES['images_upload']['tmp_name'][$key],$file_path)){
			$upload_images[] = $file_path;
			$insert_sql = "INSERT INTO images(id, file_name, upload_time) 
				VALUES('', '".$filename."', '".time()."')";
			mysqli_query($conn, $insert_sql) or die("database error: ". mysqli_error($conn));
		} 
	}
}
?>

You may also like:

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

2 thoughts on “Multiple Image Upload with jQuery, PHP and MySQL”

  1. I try this and, while the files upload fine, the form action takes me to the upload php page instead of staying on the form page and showing the progress bar.

  2. have you used same code or done custom changes? because its working fine in demo. Thanks!

Comments are closed.