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.




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 can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]