Image Upload Problem |
Model Page: crud_model.php
<?php class Crud_model extends CI_Model { var $table = "users"; var $select_column = array("id", "first_name", "last_name", "image"); var $order_column = array(null, "first_name", "last_name", null, null); function make_query() { $this->db->select($this->select_column); $this->db->from($this->table); if(isset($_POST["search"]["value"])) { $this->db->like("first_name", $_POST["search"]["value"]); $this->db->or_like("last_name", $_POST["search"]["value"]); } if(isset($_POST["order"])) { $this->db->order_by($this->order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']); } else { $this->db->order_by('id', 'DESC'); } } function make_datatables(){ $this->make_query(); if($_POST["length"] != -1) { $this->db->limit($_POST['length'], $_POST['start']); } $query = $this->db->get(); return $query->result(); } function get_filtered_data(){ $this->make_query(); $query = $this->db->get(); return $query->num_rows(); } function get_all_data() { $this->db->select("*"); $this->db->from($this->table); return $this->db->count_all_results(); } function insert_crud($data) { $this->db->insert('users', $data); } } Controller: Test_con.php <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Test_con extends CI_Controller { //functions function test_view(){ $data["title"] = "Codeigniter Ajax CRUD with Data Tables and Bootstrap Modals"; $this->load->view('superadmin/test_view', $data); } function fetch_user(){ $this->load->model("crud_model"); $fetch_data = $this->crud_model->make_datatables(); $data = array(); foreach($fetch_data as $row) { $sub_array = array(); $sub_array[] = '<img src="'.base_url().'upload/'.$row->image.'" class="img-thumbnail" width="350px" height="150px" />'; $sub_array[] = $row->first_name; $sub_array[] = $row->last_name; $sub_array[] = '<button type="button" name="update" id="'.$row->id.'" class="btn btn-warning btn-xs">Update</button>'; $sub_array[] = '<button type="button" name="delete" id="'.$row->id.'" class="btn btn-danger btn-xs">Delete</button>'; $data[] = $sub_array; } $output = array( "draw" => intval($_POST["draw"]), "recordsTotal" => $this->crud_model->get_all_data(), "recordsFiltered" => $this->crud_model->get_filtered_data(), "data" => $data ); echo json_encode($output); } function user_action(){ if($_POST["action"] == "Add") { $insert_data = array( 'first_name' => $this->input->post('first_name'), 'last_name' => $this->input->post("last_name"), 'image' => $this->upload_image() ); $this->load->model('crud_model'); $this->crud_model->insert_crud($insert_data); echo 'Data Inserted'; } } function upload_image() { if(isset($_FILES["user_image"])) { $extension = explode('.', $_FILES['user_image']['name']); $new_name = rand() . '.' . $extension[1]; $destination = './upload/' . $new_name; move_uploaded_file($_FILES['user_image']['tmp_name'], $destination); return $new_name; } } } View: test_view.php <html> <head> <title><?php echo $title; ?></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> body { margin:0; padding:0; background-color:#f1f1f1; } .box { width:900px; padding:20px; background-color:#fff; border:1px solid #ccc; border-radius:5px; margin-top:10px; } </style> </head> <body> <div class="container box"> <h3 align="center"><?php echo $title; ?></h3><br /> <div class="table-responsive"> <button type="button" data-toggle="modal" data-target="#userModal" class="btn btn-info btn-lg">Add</button> <table id="user_data" class="table table-bordered table-striped"> <thead> <tr> <th width="10%">Image</th> <th width="35%">First Name</th> <th width="35%">Last Name</th> <th width="10%">Edit</th> <th width="10%">Delete</th> </tr> </thead> </table> </div> </div> </body> </html> <div id="userModal" class="modal fade"> <div class="modal-dialog"> <form method="post" id="user_form"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Add</h4> </div> <div class="modal-body"> <label>Enter First Name</label> <input type="text" name="first_name" id="first_name" class="form-control" /> <br /> <label>Enter Last Name</label> <input type="text" name="last_name" id="last_name" class="form-control" /> <br /> <label>Select User Image</label> <input type="file" name="user_image" id="user_image" /> </div> <div class="modal-footer"> <input type="submit" name="action" class="btn btn-success" value="Add" /> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </form> </div> </div> <script type="text/javascript" language="javascript" > $(document).ready(function(){ var dataTable = $('#user_data').DataTable({ "processing":true, "serverSide":true, "order":[], "ajax":{ url:"<?php echo base_url() . 'Test_con/fetch_user'; ?>", type:"POST" }, "columnDefs":[ { "targets":[0, 3, 4], "orderable":false, }, ], }); $(document).on('submit', '#user_form', function(event){ event.preventDefault(); var firstName = $('#first_name').val(); var lastName = $('#last_name').val(); var extension = $('#user_image').val().split('.').pop().toLowerCase(); if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1) { alert("Invalid Image File"); $('#user_image').val(''); return false; } if(firstName != '' && lastName != '') { $.ajax({ url:"<?php echo base_url() . 'Test_con/user_action'?>", method:'POST', data:new FormData(this), contentType:false, processData:false, success:function(data) { alert(data); $('#user_form')[0].reset(); $('#userModal').modal('hide'); dataTable.ajax.reload(); } }); } else { alert("Bother Fields are Required"); } }); }); </script> When upload a image i face some error.
Pages of code and then "I face some error"???
1) Use the bbcode tags (https://forum.codeigniter.com/misc.php?a...help&hid=7) to make your posts more readable. 2) If there is a problem, state or show it. |
Welcome Guest, Not a member yet? Register Sign In |