javascript - How to upload file using ajax in codeigniter - Stack Overflow

admin管理员组

文章数量:1323225

I am trying to upload a file along with other parameters using ajax. However, the files are not getting uploaded.

Form Code

<form id="first_form" method="post" enctype="multipart/form-data">
    <input type="file" id="file" name="file" accept="image/*" onchange="loadFile(event)">
    <input type="text" data-validation="url" class="form-control" id="first_name" name="first_name" placeholder="First Name" />
    <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" />  
    <input type="image" src="<?php echo base_url(); ?>assets/images/icon/_Save.png" class="Save-container img-circle" id="submit_first_form">
</form>

Script Code

<script type="text/javascript">
  $(document).ready(function() {
    $("#submit_first_form").click(function(event) {
    event.preventDefault();
    var file = $("input#file").val(); 
    var first_name = $("input#first_name").val();
    var last_name = $("input#last_name").val();

    jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "student/add_data",
        dataType: 'json',
        data: {
            file: file, 
            first_name: first_name,
            last_name: last_name
        },
        success: function(res) {
        if (res)
            {
                console.log(res);
            }
        }
    }); }); });
</script>

Controller Code

public function add_data()
    {
        $data = array(
            'file' => $this->input->post('file'),
            'first_name' => $this->input->post('first_name'),
            'last_name'=>$this->input->post('last_name')
        );

        $status = "";
        $msg = "";
        $file_element_name = $data['file'];

        $config['upload_path'] = 'www.localhost/project/assets/supplier';
        $config['allowed_types'] = 'gif|jpg|png|doc|txt';
        $config['max_size'] = 1024 * 8;
        $config['encrypt_name'] = TRUE;

        $this->load->library('upload', $config);

        if (!$this->upload->do_upload($file_element_name))
            {
                $status = 'error';
                $msg = $this->upload->display_errors('', '');
            }
        else
            {
                $data = $this->upload->data();
                //$data['file_name']
                $status = "success";
                $msg = "File successfully uploaded";
            }
        echo json_encode(array('status' => $status, 'msg' => $msg));
    }

Error that i am getting in console is:

{status: "error", msg: "You did not select a file to upload."}

Can anyone please tell how to upload file

I am trying to upload a file along with other parameters using ajax. However, the files are not getting uploaded.

Form Code

<form id="first_form" method="post" enctype="multipart/form-data">
    <input type="file" id="file" name="file" accept="image/*" onchange="loadFile(event)">
    <input type="text" data-validation="url" class="form-control" id="first_name" name="first_name" placeholder="First Name" />
    <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" />  
    <input type="image" src="<?php echo base_url(); ?>assets/images/icon/_Save.png" class="Save-container img-circle" id="submit_first_form">
</form>

Script Code

<script type="text/javascript">
  $(document).ready(function() {
    $("#submit_first_form").click(function(event) {
    event.preventDefault();
    var file = $("input#file").val(); 
    var first_name = $("input#first_name").val();
    var last_name = $("input#last_name").val();

    jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "student/add_data",
        dataType: 'json',
        data: {
            file: file, 
            first_name: first_name,
            last_name: last_name
        },
        success: function(res) {
        if (res)
            {
                console.log(res);
            }
        }
    }); }); });
</script>

Controller Code

public function add_data()
    {
        $data = array(
            'file' => $this->input->post('file'),
            'first_name' => $this->input->post('first_name'),
            'last_name'=>$this->input->post('last_name')
        );

        $status = "";
        $msg = "";
        $file_element_name = $data['file'];

        $config['upload_path'] = 'www.localhost./project/assets/supplier';
        $config['allowed_types'] = 'gif|jpg|png|doc|txt';
        $config['max_size'] = 1024 * 8;
        $config['encrypt_name'] = TRUE;

        $this->load->library('upload', $config);

        if (!$this->upload->do_upload($file_element_name))
            {
                $status = 'error';
                $msg = $this->upload->display_errors('', '');
            }
        else
            {
                $data = $this->upload->data();
                //$data['file_name']
                $status = "success";
                $msg = "File successfully uploaded";
            }
        echo json_encode(array('status' => $status, 'msg' => $msg));
    }

Error that i am getting in console is:

{status: "error", msg: "You did not select a file to upload."}

Can anyone please tell how to upload file

• javascript
• php
• jquery
• ajax
• codeigniter

Share Improve this question Follow edited Dec 27, 2017 at 16:24 Sam asked Dec 27, 2017 at 16:04 SamSam 1,38155 gold badges3939 silver badges7171 bronze badges 4

• 1 try watching stackoverflow./questions/34151367/… – Leo Commented Dec 27, 2017 at 16:08
• 1 Possible duplicate of You did not select a file to upload. PHP Code Igniter – Vickel Commented Dec 27, 2017 at 16:11
• @Vickel tried the solution but still error is ing – Sam Commented Dec 27, 2017 at 16:26
• 1 @Leo Tried this solution, the form gets reloaded but the file is not getting uploaded – Sam Commented Dec 27, 2017 at 16:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try Using This code for script:

<script type="text/javascript">
    $(document).ready(function() {
    $("#submit_first_form").click(function(event) {
    event.preventDefault();
    var form_data = new FormData($('#first_form')[0]);

    jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "student/add_data",
        data: form_data,
        processData: false,
        contentType: false,
        success: function(res) {
        if (res)
            {
                console.log(res);
            }
        }
    }); }); });
</script>

<form id="first_form" method="post" enctype="multipart/form-data">

The enctype when file upload.

-> give id in form tag Submit and add a submit button before form close script to send request $("#save").click(function (event) { event.preventDefault();

// Create an FormData object
    var data1 = new FormData($('#fileUploadForm')[0]);
      console.log($('#fileUploadForm'));
$.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "<?php echo base_url(); ?>" + "student/add_data",
        data: data1,
        processData: false,
        contentType: false,
        cache: false,

        success: function (data) {
        data = JSON.parse(data);
        console.log(data);
        if(data.id==1)
        {
          localStorage.setItem("user_profile_pic", data.user_pic);

          alert("updated sucessfully")

        }



        }
    });

本文标签： javascriptHow to upload file using ajax in codeigniterStack Overflow