CodeIgniter Upload Image File with preview using Jquery Ajax

In this tutorial, We will tell you how to upload images with preview using Jquery Ajax in Codeigniter(CodeIgniter Upload Image File with preview using Jquery Ajax). upload images and preview images are the most important parts of the website.

The Codeigniter providing uploading file and resize file library. so let’s see below the following example for image upload using ajax in Codeigniter(file upload using ajax in Codeigniter).

Overview

Step 1: Download and install Codeigniter
Step 2: Create a Database in table
Step 3: Connect to Database
Step 4: Create Controller
Step 5: Create a Model
Step 6: Create The View

Step 1: Download and install Codeigniter
We are going to install Codeigniter 3, first, we will download a fresh Codeigniter 3 version and install it in our system. so you can follow below Link for Download CodeIgniter.

Step 2: Create a Database in table
In this step, we have to create a table in the database, so we will create a database using the below code.

CREATE TABLE product(
id INT(11) PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(164),
image VARCHAR(164)
)ENGINE=INNODB;

CREATE TABLE product(

id INT(11) PRIMARY KEY AUTO_INCREMENT,

title VARCHAR(164),

image VARCHAR(164)

)ENGINE=INNODB;

Step 3: Connect to Database
Go to the config folder and open database.php file some changes in this file like hostname, database username, database password, and database name.

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'enter here database name',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'enter here database name',

'dbdriver' => 'mysqli',

'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

'cachedir' => '',

'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

'encrypt' => FALSE,

'compress' => FALSE,

'stricton' => FALSE,

'failover' => array(),

'save_queries' => TRUE

);

Step 4: Create Controller
In this step, we will create a Upload_image.php file in the “application/controller” directory and paste the below code in this controller.
application/controller/Upload_image.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


class Upload_image extends CI_Controller {


    /**
    * Constructor of Controller
    *
    * @return Response
   */
    public function __construct() {
        parent::__construct();
        $this->load->model('upload_model');
    }

    function image_upload()  
	{  
	   $this->load->view('image_upload');  
	}  
	
    function ajax_upload()  
    {  
	   if(isset($_FILES["file"]["name"]))  
	   {  
			$config['upload_path'] = './assets/images';  
			$config['allowed_types'] = 'jpg|jpeg|png|gif';  
			$this->load->library('upload', $config);  
			if(!$this->upload->do_upload('file'))  
			{  
				 echo $this->upload->display_errors();  
			}  
			else  
			{  
				$data = array('upload_data' => $this->upload->data());
 
				$title= $this->input->post('title');
				$image= $data['upload_data']['file_name']; 
				 
				$result= $this->upload_model->save_upload($title,$image);
  
				echo '<img src="'.base_url().'assets/images/'.$image.'" width="300" height="225" class="img-thumbnail" />';  
			}  
	   }  
    }  
}

?>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Upload_image extends CI_Controller {

/**

* Constructor of Controller

* @return Response

public function __construct() {

parent::__construct();

$this->load->model('upload_model');

}

function image_upload()

{

$this->load->view('image_upload');

}

function ajax_upload()

{

if(isset($_FILES["file"]["name"]))

{

$config['upload_path'] = './assets/images';

$config['allowed_types'] = 'jpg|jpeg|png|gif';

$this->load->library('upload', $config);

if(!$this->upload->do_upload('file'))

{

echo $this->upload->display_errors();

}

else

{

$data = array('upload_data' => $this->upload->data());

$title= $this->input->post('title');

$image= $data['upload_data']['file_name'];

$result= $this->upload_model->save_upload($title,$image);

echo '<img src="'.base_url().'assets/images/'.$image.'" width="300" height="225" class="img-thumbnail" />';

}

Step 5: Create a Model
In this step, we will create a Upload_model.php file in the “application/models” directory and paste the below code in this model.
application/models/Upload_model.php

<?php
class Upload_model extends CI_Model{
 
    function save_upload($title,$image){
        $data = array(
                'title' => $title,
                'image' => $image
            );  
        $result= $this->db->insert('product',$data);
        return $result;
    }     
}
?>

<?php

class Upload_model extends CI_Model{

function save_upload($title,$image){

$data = array(

'title' => $title,

'image' => $image

);

$result= $this->db->insert('product',$data);

return $result;

}

Step 6: Create The View
Finally, we will create the image_upload.php file in the views directory. here in this file use below following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CodeIgniter Upload Image File with preview using Jquery Ajax - XpertPhp</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
	    <div class="row"> 
			<div class="col-sm-4 col-md-offset-4">
			<h4>Upload files using Codeigniter and Ajax</h4>
				<form class="form-horizontal" id="submit">
					<div class="form-group">
						<input type="text" name="title" class="form-control" placeholder="Title">
					</div>
					<div class="form-group">
						<input type="file" name="file">
					</div>
					<div class="form-group">
						<button class="btn btn-success" id="btn_upload" type="submit">Upload</button>
					</div>
				</form>   
			</div>
		</div>
	    <div class="row"> 
			<div class="col-sm-4 col-md-offset-4" id="uploaded_image">  
			</div>
		</div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#submit').submit(function(e){
            e.preventDefault(); 
			 $.ajax({
				url:'<?php echo base_url();?>upload_image/ajax_upload',
				type:"post",
				data:new FormData(this),
				processData:false,
				contentType:false,
				cache:false,
				async:false,
				success: function(data){
					$('#uploaded_image').html(data); 
				}
			});
        });
    });
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CodeIgniter Upload Image File with preview using Jquery Ajax - XpertPhp</title>

</head>

<body>

<h4>Upload files using Codeigniter and Ajax</h4>

</div>

</div>

<button class="btn btn-success" id="btn_upload" type="submit">Upload</button>

</div>

</form>

</div>

</div>

$(document).ready(function(){

$('#submit').submit(function(e){

e.preventDefault();

$.ajax({

url:'<?php echo base_url();?>upload_image/ajax_upload',

type:"post",

data:new FormData(this),

processData:false,

contentType:false,

cache:false,

async:false,

success: function(data){

$('#uploaded_image').html(data);

}

});

</script>

</body>

</html>