codeigniterのajaxを使用して他のフィールドデータと一緒にファイルをアップロード

Question

他のフィールドデータと共にファイルをアップロードしたいが、他のすべてのデータは投稿されますが、ajaxを介してコントローラにファイルを投稿する方法。

私のビューファイル

<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> 

私のスクリプトは

 <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> 

私のコントローラ

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'); 
    } 
} 

どのように私はここに他の提出したデータと一緒にファイルをアップロードすることができますか？

Answer 1

以下の解決策をご確認ください。入力データを含むファイルを送信するのに役立ちます。

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>

それが動作しない場合は、私に教えてください。