Upload Image Multiple Thumbnail Sizes using CodeIgniter
In this post we have share how to upload image and create multiple thumbnail sizes using CodeIgniter with MySQL. File upload functionality is one of the most common requirements for most of the web applications. Codeigniter file upload library is a very simple to use. File Uploading step-by-step instructions on how to upload file using CodeIgniter with MySQL.
Step 1: Create MySQL Database and Table
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php //Table structure for table `picture` CREATE TABLE `picture` ( `id` int(11) NOT NULL, `url` int(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; // Indexes for table `picture` ALTER TABLE `picture` ADD PRIMARY KEY (`id`); //AUTO_INCREMENT for table `picture` ALTER TABLE `picture` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT; ?> |
Step 2: Create a model file
Create a model file named “Upload_model.php” inside “application/models” folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?php /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ /** * Description of Upload Model: CodeIgniter Upload image with MySQL * * @author TechArise Team * * @email info@techarise.com */ if (!defined('BASEPATH')) exit('No direct script access allowed'); class Upload_model extends CI_Model { private $_ID; private $_url; public function setID($ID) { $this->_ID = $ID; } public function setURL($url) { $this->_url = $url; } // get image public function getPicture() { $this->db->select(array('p.id', 'p.url')); $this->db->from('picture p'); $this->db->where('p.id', $this->_ID); $query = $this->db->get(); return $query->row_array(); } // insert image public function create() { $data = array( 'url' => $this->_url, ); $this->db->insert('picture', $data); return $this->db->insert_id(); } } ?> |
Step 3: Update constants file
Open application/config/constants.php file add update code.
|
1 2 3 4 5 6 7 8 9 10 |
<?php $root = "http://" . $_SERVER['HTTP_HOST']; $root .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']); $constant['base_url'] = $root; define('HTTP_UPLOAD_LARGE_PATH', $constant['base_url'] . 'assets/uploads/_large/'); define('HTTP_UPLOAD_MEDIUM_PATH', $constant['base_url'] . 'assets/uploads/_medium/'); define('HTTP_UPLOAD_THUMB_PATH', $constant['base_url'] . 'assets/uploads/_thumb/'); define('HTTP_UPLOAD_MOBILE_PATH', $constant['base_url'] . 'assets/uploads/_mobile/'); define('ROOT_UPLOAD_PATH', BASH_PATH . 'assets/uploads/'); ?> |
Step 4: Create a controller file
Next create a controller file named “Upload.php” inside “application/controllers” folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?php /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ /** * @package Upload : CodeIgniter Upload Image with MySQL * * @author TechArise Team * * @email info@techarise.com * * Description of Upload Controller */ if (!defined('BASEPATH')) exit('No direct script access allowed'); class Upload extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('Upload_model', 'upl'); } // upload image public function index() { $data['page'] = 'upload-img'; $data['title'] = 'Upoad Image | TechArise'; $this->load->view('upload/index', $data); } // action save method public function save() { if ($this->input->post('upload_img')) { $path = ROOT_UPLOAD_PATH; // Define file rules $initi = $this->upload->initialize(array( "upload_path" => $path, "allowed_types" => "gif|jpg|jpeg|png|bmp", "remove_spaces" => TRUE )); $imagename = 'no-img.jpg'; if (!$this->upload->do_upload('imageURL')) { $error = array('error' => $this->upload->display_errors()); echo $this->upload->display_errors(); } else { $data = $this->upload->data(); $imagename = $data['file_name']; } // create Thumbnail -- IMAGE_SIZES; $image_sizes = array('_mobile'=>array(75,75), '_thumb' => array(300, 200),'_medium' => array(500, 270), '_large' => array(750, 406)); // load library $this->load->library('image_lib'); foreach ($image_sizes as $key=>$resize) { $config = array( 'source_image' => $data['full_path'], 'new_image' => ROOT_UPLOAD_PATH .'/'.$key, 'maintain_ratio' => FALSE, 'width' => $resize[0], 'height' => $resize[1], 'quality' =>70, ); $this->image_lib->initialize($config); $this->image_lib->resize(); $this->image_lib->clear(); } $this->load->library('image_lib', $config); $this->image_lib->resize(); $this->upl->setURL($imagename); $this->upl->create(); $this->session->set_flashdata('img_uploaded_msg', '<div class="alert alert-success">Image uploaded successfully!</div>'); $this->session->set_flashdata('img_uploaded', $imagename); redirect('/'); } } } ?> |
Step 5: Create a view
Create a view file named “index.php” inside “application/views/upload” folder
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php $this->load->view('templates/header'); ?> <div class="row"> <div class="col-lg-12"> <h2>Upload Image and Create Multiple Thumbnail Sizes using CodeIgniter with MySQL</h2> </div> </div><!-- /.row --> <div class="row"> <div class="col-lg-12"> <?php echo $this->session->flashdata('img_uploaded_msg'); ?> </div> </div><!-- /.row --> <?php if(empty($this->session->flashdata('img_uploaded'))) { ?> <div class="row"> <form action="<?php echo site_url();?>upload/save" class="img-upl-validation" id="img-upl-validation" enctype="multipart/form-data" method="post" accept-charset="utf-8"> <div class="col-lg-6"> </div> <div class="col-lg-6"> <div class="form-group"> <label for="image">Upload Image</label> <input type="file" name="imageURL" id="url" class="filestyle" value="" data-icon="false" data-buttontext="Choose image"> </div> </div> <div class="col-lg-12 col-sm-12"> <div class="form-group text-right padT"> <button type="submit" name="upload_img" id="upload-img" value="upl-img" class="btn btn-primary mrgT">Upload</button> </div> </div> </form> </div><!-- /.row --> <?php } else { ?> <div class="container"> <h2>Images</h2> <img width="700" height="400" class="img-thumbnail" src="<?php print HTTP_UPLOAD_LARGE_PATH.$this->session->flashdata('img_uploaded');?>"><br> <img width="500" height="270" class="img-thumbnail" src="<?php print HTTP_UPLOAD_MEDIUM_PATH.$this->session->flashdata('img_uploaded');?>"><br> <img width="300" height="200" class="img-thumbnail" src="<?php print HTTP_UPLOAD_THUMB_PATH.$this->session->flashdata('img_uploaded');?>"><br> <img width="75" height="75" class="img-thumbnail" src="<?php print HTTP_UPLOAD_MOBILE_PATH.$this->session->flashdata('img_uploaded');?>"><br> </div> <?php } ?> <?php $this->load->view('templates/footer'); ?> |