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]