Tuesday, 18 October 2016

CodeIgniter Tutorial - Upload Image File using Jquery Ajax



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>  

1 comment:

  1. I can't get the image to display... Has it anything to do with my server?

    ReplyDelete