ittutorial : php tutorial, tutorials for jquery, javascript, ajax and more

Codeigniter Tutorials

Home » Codeigniter »

How to Upload data using Ajax.

File Name :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Insert_update extends CI_Controller {
public function __construct()
{
parent::__construct();
}

public function index() {
$this->load->view('insert-update');
}

public function do_upload()
{
$status = "";
$msg = "";
$config['upload_path']="./assets/images";
$config['allowed_types'] = 'jpg|jpeg|png|gif|pdf';
$config['encrypt_name'] = TRUE;
$this->load->library('upload',$config);
if($this->upload->do_upload("file")){
$data = array('upload_data' => $this->upload->data());
$title= $this->input->post('title');
$image= $data['upload_data']['file_name'];
$result= $this->Auth_model->save_upload($title,$image);
// echo json_encode($result);
if($result)
{
$status = "success";
$msg = "File successfully uploaded";
}
else
{
$status = "error";
$msg = "Something went wrong when saving the file, please try again.";
}

}
echo json_encode(array('status' => $status, 'msg' => $msg));
exit;

}

public function ajax_upload()
{
if(isset($_FILES["image_file"]["name"]))
{
$config['upload_path']="./assets/images";
$config['allowed_types'] = 'jpg|jpeg|png|gif|pdf';
$this->load->library('upload', $config);
if(!$this->upload->do_upload('image_file'))
{
//echo $this->upload->display_errors();

$error = $this->upload->display_errors();
echo json_encode(array('msg' => $error, 'success' => false));
}
else
{
$data = $this->upload->data();
$image= $data['file_name'];
$title= $this->input->post('title');

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

if($result){
$arr = array('msg' => 'Image has been uploaded successfully', 'success' => true);
//$arr = "Thank you for Submitting.";

}
echo json_encode($arr);

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

}

File Name :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload files using Codeigniter and Ajax</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<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>

<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();?>insert_update/do_upload',
type:"post",
data:new FormData(this),
processData:false,
contentType:false,
cache:false,
async:false,
success: function(data){
alert("Upload File Successful.");

//alert(data.msg);

}
});

});

});

</script>

<div class="container">
<br /><br /><br />
<h3 align="center"><?php //echo $title; ?></h3>
<form method="post" id="upload_form" align="center" enctype="multipart/form-data">
<input type="text" name="title" class="form-control" placeholder="Title">
<input type="file" name="image_file" id="image_file" />
<br />
<br />
<input type="submit" name="upload" id="upload" value="Upload" class="btn btn-info" />
</form>
<br />
<br />
<div id="divMsg" class="alert alert-success" style="display: none">
<span id="msg"></span>
</div>

<div id="uploaded_image">
</div>
</div>

<script>
$(document).ready(function(){
$('#upload_form').on('submit', function(e){
e.preventDefault();
if($('#image_file').val() == '')
{
alert("Please Select the File");
}
else
{
$.ajax({
url:"<?php echo base_url(); ?>insert_update/ajax_upload",
method:"POST",
data:new FormData(this),
contentType: false,
cache: false,
processData:false,
// dataType:'json',
success:function(data)
{
$('#uploaded_image').html(data);

if(data.success == true){

$('#msg').html(data.msg);
$('#divMsg').show();
}
else if(data.success == false){
$('#msg').html(data.msg);
$('#divMsg').show();
}
setTimeout(function(){
$('#msg').html('');
$('#divMsg').hide();
}, 3000);

}
});
}
});
});
</script>
</body>
</html>

view

File Name :

public function save_upload($title,$image){
$data = array(
'title' => $title,
'file_name' => $image
);
$result= $this->db->insert('gallery',$data);
//return $result;
return $this->db->insert_id();
}

File Name :

Example

File Name : Itemcontroller

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ItemController extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->database();
}
public function ajaxRequest()
{
$data['data'] = $this->db->get("items")->result();
$this->load->view('itemlist', $data);
}

public function ajaxRequestPost()
{
$data = array(
'title' => $this->input->post('title'),
'description' => $this->input->post('description')
);
$this->db->insert('items', $data);

echo 'Added successfully.';
}
}

view

File Name : itemlist

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>codeigniter ajax request - ittutorial.in</h2>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-8">
<strong>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
<div class="col-lg-8">
<strong>Description:</strong>
<textarea name="description" class="form-control" placeholder="Description"></textarea>
</div>
<div class="col-lg-8">
<br/>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>

<table class="table table-bordered" style="margin-top:20px">

<thead>
<tr>
<th>Title</th>
<th>Description</th>
</tr>
</thead>

<tbody>
<?php foreach ($data as $item) { ?>
<tr>
<td><?php echo $item->title; ?></td>
<td><?php echo $item->description; ?></td>
</tr>
<?php } ?>
</tbody>

</table>
</div>

<script type="text/javascript">
$('form').submit(function(e) {
e.preventDefault();

var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();

$.ajax({
url: '/ajax-requestPost',
type: 'POST',
data: {title: title, description: description},
error: function() {
alert('Something is wrong');
},
success: function(data) {
$("tbody").append("<tr><td>"+title+"</td><td>"+description+"</td></tr>");
alert("Record added successfully");
}
});

});

</script>

</body>
</html>

Itechtuto

Codeigniter Tutorials

File Name :

File Name :

File Name :

File Name :

File Name : Itemcontroller

File Name : itemlist

Connect Us Socially:

Quick Links