Create Thumbnails While Uploading Multiple Images with PHP & jQuery

Thumbnails are small images with reduced size from larger images. Due to small size images, thumbnails are useful to display copies of many large images on a same page. The functionality to create and display thumbnails from larger images needed in all kind of web applications.

So in this tutorial you will learn how to create thumbnails dynamically while uploading images with PHP and jQuery. The tutorial explained in easy steps and live demo to create thumbnails from different image types like (JPG/JPEG/PNG/GIF) with created thumbnail image preview and original image.

Also, read:

• Upload Multiple Images using jQuery, PHP & MySQL
• 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
• Amazon S3 File Upload using JavaScript

As we have covered this tutorial with live demo to upload image and create thumbnails with PHP and jQuery, so the file structure for this example is following.

• index.php
• form_submit.js
• upload.php
• functions.php

Steps1: Create Image Upload Form
First in index.php, we will create image upload form to upload multiple images with action to upload.php.

<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>

Steps2: Handle Image Upload Form Submit
In form_submit.js, we will handle form submit using jQuery form plugin on change event to submit form to upload.php when image file browse and selected.

$(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();
    });
});

Steps3: Handle Image Upload and Create Thumbnails
Finally in upload.php, we will handle functionality to upload multiple images and create thumbnails using function createThumbnail().

<?php
include_once("functions.php");
$uploaded_images = array();
$thumb_width = 100;
$thumb_height = 90;
$upload_dir = 'uploads/';
$upload_dir_thumbs = 'uploads/thumbs/';
foreach($_FILES['upload_images']['name'] as $key=>$val){
	$filename = $_FILES['upload_images']['name'][$key];	
	$extension = end(explode(".", $filename));
	$filename = "demo_image.".$extension;	
	$upload_file = $upload_dir.$filename;	
	if(move_uploaded_file($_FILES['upload_images']['tmp_name'][$key],$upload_dir.$filename)){		
		createThumbnail($filename, $thumb_width, $thumb_height, $upload_dir, $upload_dir_thumbs); 		
	}
}
?>

We have created below function in functions.php to create thumbnails of uploaded images.

<?php
function createThumbnail($filename, $thumb_width, $thumb_height, $upload_dir, $upload_dir_thumbs) { 	
	$upload_image = $upload_dir.$filename;
	$thumbnail_image = $upload_dir_thumbs.$filename;
	list($width,$height) = getimagesize($upload_image);
	$thumb = imagecreatetruecolor($thumb_width,$thumb_height);	
	if(preg_match('/[.](jpg|jpeg)$/i', $filename)) {
        $image_source = imagecreatefromjpeg($upload_image);
    } else if (preg_match('/[.](gif)$/i', $filename)) {
        $image_source = imagecreatefromgif($upload_image);
    } else if (preg_match('/[.](png)$/i', $filename)) {
        $image_source = imagecreatefrompng($upload_image);
    } else {
		$image_source = imagecreatefromjpeg($upload_image);
	}	
	imagecopyresized($thumb,$image_source,0,0,0,0,$thumb_width,$thumb_height,$width,$height);	
	if(preg_match('/[.](jpg|jpeg)$/i', $filename)) {
		imagejpeg($thumb,$thumbnail_image,100);        
    } else if (preg_match('/[.](gif)$/i', $filename)) {
        imagegif($thumb,$thumbnail_image,100);
    } else if (preg_match('/[.](png)$/i', $filename)) {
        imagepng($thumb,$thumbnail_image,100);
    } else {
		imagejpeg($thumb,$thumbnail_image,100);
	}	
}
?>

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