Hi guys, in this post we will see how to upload multiple images and generate thumbnails of uploaded images on the fly and also save image name/path to database. We have used image magician library to generate thumbnails, it’s really great and easy to use. You can check their official site here. This script would be useful if you have many large images in your site and you only want to display thumbnails in index pages to reduce page size. Then clicking on thumbnails would open respective larger images, it’s just an example, you can utilize this script in multiple ways.
Let’s see how it all works. So as usual we have connection.php file to connect with database and index.php file that displays the upload form in frontend and calls upload.php file which uploads the file to server and with the help of image magician library it generates thumbnails of uploaded image and saves them in a different directory.
Below is our code for index.php:
<?php
include('upload.php');
$obj = New Upload();
if(isset($_POST['submit'])){
$msg = $obj->upload_img();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="InfoTuts">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/jquery-1.9.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="heading_wrapper">
<?php if( isset($msg) && $msg != ''){ ?>
<div class="msg" id="notification">
<?php print_r($msg); ?>
</div>
<?php } ?>
<div class="col-md-12">
<div class="heading">
<h2>Upload Multiple Images and generate thumbnails in PHP </h2>
</div>
</div>
</div>
<div class="content_wrapper">
<div class="col-md-6 col-md-offset-3">
<div class="content">
<form name="upload_img" method="post" enctype="multipart/form-data">
<div class="upload_field">
<div class="upload_img">
<input class="image" name="img_files[]" type="file" multiple="multiple">
<span class="add_more custom_span btn btn-primary">Add more</span>
</div>
</div>
<input class="submit btn btn-success col-md-offset-3" name="submit" type="submit" value="Upload">
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".add_more").click(function() {
$('.upload_field').append('<div class="upload_img"><input class="image" name="img_files[]" type="file" multiple="multiple" ><span class="remove custom_span btn btn-danger" >Remove</span></div>');
});
$('.content').on('click', '.remove', function() {
$(this).parent("div.upload_img").remove();
});
var msg = "<?php if(isset($msg)){ echo $msg; } ?>";
if( msg !=''){
$("#notification").html(msg);
if ( $( "#notification p" ).length ) {
$("#notification p").slideDown("slow");
setTimeout(function(){ $("#notification p").slideUp("slow"); }, 8000);
}
if ( $( "#notification ul" ).length ) {
$("#notification ul").slideDown("slow");
setTimeout(function(){ $("#notification ul").slideUp("slow"); }, 8000);
}
}
});
</script>
</body>
</html>
Once you hit upload, upload.php file would come into action and will upload these selected files to server and will resize them. You can find the SQL script in zip file that you can download from above download link. Hope this simple upload script would come handy in your web projects.