Hello friends this is the new post on Codeigniter tutorials. In this post we are going to learn how to upload image file in Codeigniter framework application by using Jquery with Ajax without page refresh. I have received lots of request from my viewer to make tutorial on how to upload image or file in codeigniter framework by using Ajax with JQuery. I have been seen many of the beginner programmer has got problem to upload file or image to server by using ajax. For uploading of image or file by using ajax you have to put some code inside your ajax method. Here we will send file data to server by using form data object. By using this object we will send file data to the server. So here first we have load view file from controller function and make image upload form and on that page we have write ajax code and in ajax code we have send selected file data to the server by using form data object. Then after from ajax method we have send request for upload image file to server and on server side we have called controller function and in that function we have load upload library with configuration like path of uploaded image and allowed types of image file and called function for upload. If image file uploaded then it will be display on web page and if there is some error while uploading then that error will be display on web page.
Source Code
Controllers - main.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Main extends CI_Controller {
//functions
function image_upload()
{
$data['title'] = "Upload Image using Ajax JQuery in CodeIgniter";
$this->load->view('image_upload', $data);
}
function ajax_upload()
{
if(isset($_FILES["image_file"]["name"]))
{
$config['upload_path'] = './upload/';
$config['allowed_types'] = 'jpg|jpeg|png|gif';
$this->load->library('upload', $config);
if(!$this->upload->do_upload('image_file'))
{
echo $this->upload->display_errors();
}
else
{
$data = $this->upload->data();
echo '<img src="'.base_url().'upload/'.$data["file_name"].'" width="300" height="225" class="img-thumbnail" />';
}
}
}
}
Views - image_upload.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson | <?php echo $title; ?></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<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="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="uploaded_image">
</div>
</div>
</body>
</html>
<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(); ?>main/ajax_upload",
//base_url() = http://localhost/tutorial/codeigniter
method:"POST",
data:new FormData(this),
contentType: false,
cache: false,
processData:false,
success:function(data)
{
$('#uploaded_image').html(data);
}
});
}
});
});
</script>
I can't get the image to display... Has it anything to do with my server?
ReplyDeletetry to copy and paste the code from website in desc. if works and then compare with your code. cause it's work for me.
Deletetry to copy and paste the code from website in desc. if works and then compare with your code. cause it's work for me.
Deleteso thanks for the tutorial, very helping!!!! So glad found this web
ReplyDeleteBut the problem is , it not save into database. Please make database based image upload system in Codeigniter .
ReplyDeleteNo, it is saving into your esignated folder. but it is not displaying.
DeletePlease make a complete website using codeigniter
ReplyDeleteplease we need database image upload with jquery
ReplyDeletewebslessons is one of the best tuto sites after w3schools. excelent and simple.
ReplyDelete