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); } } } ?>
Please follow and like us:
Real nice design and wonderful articles, hardly anything else we need : D.