Skip to main content

CodeIgniter Tutorial - Upload Image File using Jquery Ajax

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>

Comments

Post a Comment

Popular posts from this blog

Core php login logout and register view delete

Core php login logout and register view delete Database.php CREATE TABLE IF NOT EXISTS register.`users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `password` varchar(50) NOT NULL, `trn_date` datetime NOT NULL, PRIMARY KEY (`id`) ); CREATE TABLE IF NOT EXISTS register.`new_record` ( `id` int(11) NOT NULL AUTO_INCREMENT, `trn_date` datetime NOT NULL, `name` varchar(50) NOT NULL, `age`int(11) NOT NULL, `submittedby` varchar(50) NOT NULL, PRIMARY KEY (`id`) ); Auth.php <?php session_start(); if(!isset($_SESSION["username"])){ header("Location: login.php"); exit(); } ?> Dashbaord .php <!DOCTYPE html> <html lang="en"> <head> <title>Dashboard</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.boo...
Post a Comment
Read more

Insert Fetch Update Delete Mysql data in Codeigniter

Database -- -- Table structure for table `tbl_user` -- CREATE TABLE IF NOT EXISTS `tbl_user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `first_name` varchar(200) NOT NULL, `last_name` varchar(200) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=95 ; -- -- Dumping data for table `tbl_user` -- INSERT INTO `tbl_user` (`id`, `first_name`, `last_name`) VALUES (91, 'Harold', 'Jones'), (89, 'Christine', 'Smith'), (88, 'Marker', 'Angela'), (87, 'Romeo', 'Mary'), (86, 'Smith', 'John'); Controller - main.php <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Main extends CI_Controller { //functions public function index(){ $this->load->model("main_model"); $data["fetch_data"] = $this->main_model->...
Post a Comment
Read more

cloudconvert to convert file using curl php

<!DOCTYPE html> <html> <head>   <title>Project APi File Convert</title>   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <form action="curl.php" method="POST" enctype="multipart/form-data">    <div class="container">    </br></br></br></br></br></br>      <div class="form-group">       <label>Select Input  Format</label>       <select class="form-control" name="inputformat">         <option>Select Format</option>         <option value="key">key</option>     ...
Post a Comment
Read more