In this tutorial, We will tell you how to upload image and create a thumbnail in codeigniter. upload image and create thumbnail images are most important part of the website. Codeigniter providing uploading file and resize file library. so let’s uses of codeigniter.
Step1: Create view file
We will create a index.php file in view directory and paste below code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Upload image and create a thumbnail in codeigniter - XpertPhp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<form id="productImage" action="<?php echo site_url('upload');?>" name="productImage" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="email">Choose Product Images:</label>
<input name="productImage" type="file" />
</div>
<button type="submit" value="Submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
Step2: Create Upload Directory
Now, we will create a images folder for image upload on root project directory.
Step 3: Create controller
Finally, we will create a Upload.php controller file. when you choose upload image and click on submit button then that form will call upload controller’s index method.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Upload extends CI_Controller {
function __construct() {
parent::__construct();
}
public function index()
{
$this->load->helper(array('form', 'url'));
if($this->input->post('productImage'))
{
$file_name = time().'-'.$_FILES["image"]['name'];
$config = array(
'upload_path' => "./assets/images/",
'allowed_types' => "gif|jpg|png|jpeg|JPEG|JPG|PNG|GIF",
'overwrite' => TRUE,
'max_size' => "26200",
'max_width' => "650",
'max_height' => "500",
'file_name' => $new_name
);
$this->load->library('upload', $config);
$data = $this->upload->data();
// Create thumnail or resize image
$config2 = array(
'source_image' => $data['full_path'], //get original image
'new_image' => $data['file_path'].'thumb', //save as new image //need to create thumbs first
'maintain_ratio' => true,
'width' => 150
);
$this->load->library('image_lib'); //load library
$this->image_lib->initialize($config2);
$this->image_lib->resize();
$this->image_lib->clear();
$this->load->view('index');
}
else
{
$this->load->view('index', $data);
}
}
}
?>