File upload along with other field data using ajax in codeigniter

Question

I want to upload file along with other field data but all other data will posted but how to post file through ajax to controller.

my view file

 <form  method="post"action=""id="meetingform"enctype="multipart/form-data" >                                               
    <label for="inputEmail4">Meeting Date</label>                                                    
    <input type="text" id="date" name="meetingdate">                                                      
    <label for="inputEmail2" >Subject</label>                                                    
    <input type="text" id="subjectt" name="subject"  placeholder="Subject">                                                        
    <input type="hidden" name="meetingevent" value="Meeting"/>                                               
    <label for="inputEmail2" >Venue</label>                                                    
    <input type="text" id="venuee" name="venue"   placeholder="Venue" >                                                        
    <label for="inputEmail2" >Description</label>                                                    
    <textarea name="description" id="desc" placeholder="Description" >
    </textarea>                                                        
    <label for="inputEmail2" >MOM</label>                                                    
    <input type="text" id="momm" name="mom" placeholder="MOM" >                                                                                        
    <input type="file" name="photo" id="photo">                                                
    <input type="file" name="document" id="documents">                                                        
    <button  type="button" id="submit"> </button>                                                    
 </form>

my script is

     <script>  
        $(document).ready(function () {
            $("#submit").click(function (e) {  

                $.ajax({
                    url: '<?php echo site_url() ?>admin/meeting_form',
                    type: 'POST',
                    fileElementId   :'photos',
                    data: $("#meetingform").serialize(),
                    success: function () {
               $('#msg').html('<span style="color:green;align:center;">Data 
                  Posted.</span>');
                        $('#date').val('');
                        $('#subjectt').val('');
                        $('#venuee').val('');
                        $('#desc').val('');
                        $('#momm').val('');
                        $('#photo').val('');
                        $("#msg").delay(3000).fadeOut();
                    },
                    error: function () {
                $('#msg').html('<span style="color:red;">Data didnot post .
                           </span>');
                    }
                });
            });
        });

    </script>

my controller

public function meeting_form() {
    $session_data = $this->session->userdata('admin_logged_in');
    $id = $session_data['id'];
    if ($session_data) {
        $this->form_validation->set_rules('meetingdate', 'Meeting Date', 
                 'required');
        $this->form_validation->set_rules('subject', 'Subject', 'required');
        $this->form_validation->set_rules('venue', 'Venue', 'required');
        $this->form_validation->set_rules('description', 'Description','required');
        $this->form_validation->set_rules('mom', 'MOM', 'required');
        if ($this->form_validation->run() == false) 
        {
            $this->load->view('project_monnetering');
        }
        else 
        {
            $data = array('event_date' => date('y-m-d', strtotime($this-
            >input->post('meetingdate'))), 'event_type' => $this->input-
            >post('meetingevent'), 'user_id' => $id,
                'post_description' => $this->input->post('description'));
            $last_id = $this->admin_model->insert_event_master($data);
            $data1 = array('meeting_date' => date('y-m-d', strtotime($this-
           >input->post('meetingdate'))), 'event_id' => $last_id, 'subject' 
               => $this->input->post('subject'),
                'venue' => $this->input->post('venue'), 'brief_desc' => 
             $this->input->post('description'), 'mom' => $this->input-
             >post('mom'));
            $this->admin_model->insert_meeting_details($data1);
            redirect('admin/project_monnetering', 'refresh');
        }
    } else {
        $this->load->view('login');
    }
}

How can i upload file along with other filed data here?

Hi. Extremely sorry for not reading the code properly. I missed the `.serialize()` function. Please view this post to get help - https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery — Sagar, Jun 28 '17 at 08:38
This could help too - https://stackoverflow.com/questions/12966433/convert-form-data-to-json-object — Sagar, Jun 28 '17 at 08:43
See if simple search google "Ajax Upload Codeigniter " you will get plenty solution's and tutorials along with code. Check this tutorials might you can fix your problem. http://www.roytuts.com/ajax-file-upload-using-codeigniter-jquery/ or https://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684 — Nono, Jun 28 '17 at 08:52

score 0 · Answer 1 · answered Jun 28 '17 at 09:31

Please check below mentioned solution, This will help you to send file with input data.

var myFormData = new FormData();

$(document).on("click", "button", function(e) {
  e.preventDefault();
  var inputs = $('#my_form input[type="file"]');
  $.each(inputs, function(obj, v) {
    var file = v.files[0];
    var filename = $(v).attr("data-filename");
    var name = $(v).attr("id");
    myFormData.append(name, file, filename);
  });
  var inputs = $('#my_form input[type="text"]');
  $.each(inputs, function(obj, v) {
    var name = $(v).attr("id");
    var value = $(v).val();
    myFormData.append(name, value);
  });
  var xhr = new XMLHttpRequest;
  xhr.open('POST', '/echo/html/', true);
  xhr.send(myFormData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form" enctype="multipart/form-data">
    <input type="file" name="file_1" id="file_1" data-filename="image.jpg">
    <input type="text" name="check1" id="check1"/>
    <input type="text" name="check2" id="check2"/>
    <input type="text" name="check3" id="check3"/>
    <button>click</button>
</form>

Let me know if it not works.

File upload along with other field data using ajax in codeigniter

1 Answers1