使用codeigniter中的ajax将文件与其他字段数据一起上传

时间:2017-06-28 08:18:14

标签: javascript ajax codeigniter

我想上传文件和其他字段数据,但是所有其他数据都会发布,但是如何通过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');
    }
}

我如何在此处上传文件以及其他提交的数据?

1 个答案:

答案 0 :(得分:0)

请检查下面提到的解决方案,这将帮助您发送包含输入数据的文件。

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>

如果不起作用,请告诉我。