Today, We want to share with you jquery ajax image upload preview codeigniter.In this post we will show you upload multiple image files in codeigniter using ajax jquery, hear for upload video using ajax jquery in php we will give you demo and example for implement.In this post, we will learn about How To Upload Multiple Files And Images In CodeIgniter? with an example.

CodeIgniter Upload Image File With Preview Using Jquery Ajax

Contents

Step 1: Download and install Codeigniter

Example 1:
below Link for Download CodeIgniter.

Click Here : Download CodeIgniter.

Step 2: Create a Database in table

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

Step 3: Connect to Database

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '[email protected]#$%^44f',
	'database' => 'pakainfo_website',
	'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

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 movie_upload()  
	{  
	   $this->load->view('movie_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

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('onlinemovie',$data);
        return $result;
    }     
}
?>

Step 6: Create The View

movie_upload.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CodeIgniter Upload Image File with preview using Jquery Ajax - www.pakainfo.com</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>

I hope you get an idea about jquery ajax image upload with preview.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.