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.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.