codeigniter jquery ajax file upload

Question

I am creating a simple jquery ajax crud application. below are my codes:

welcome.php

public function add_contestant() {
    $this->validate();

    $path = 'img/';
    $config['upload_path'] = '/img/';
    $config['allowed_types'] = 'gif|jpg|png';
    $this->load->library('upload', $config);
    $this->upload->do_upload("file");

    $data = array(
                "Firstname" => $this->input->post('first_name'),
                "Lastname" => $this->input->post('last_name'),
                "DateOfBirth" => $this->input->post('dob'),
                "IsActive" => (int)$this->input->post('is_active'),
                "DistrictId" => $this->input->post('district'),
                "Gender" => $this->input->post('gender'),
                "PhotoUrl" => $path,
                "Address" => $this->input->post('address')
            );

    $this->contest->insert($data);

    echo json_encode(array("status" => TRUE));
}

contestant_view.php

$('#save').click(function(event) {$('.help-block').empty();
    event.preventDefault();

    var first_name = $('#first_name').val();
    var last_name = $('#last_name').val();
    var dob = $('#dob').val();
    var is_active = $("#is_active").is(":checked") ? 1 : 0;
    var district = $('#district').val();
    var gender = $("input[type='radio'][name='gender']:checked").val();
    var photo = $('input[type=file]').val();
    var address = $('#address').val();//alert(gender);

    $.ajax({
        type: 'POST',
        url: '<?php echo base_url('index.php/welcome/add_contestant/'); ?>',
        dataType: 'json',
        data: {first_name: first_name, last_name: last_name, dob: dob, is_active: is_active, district: district, gender: gender, photo: photo, address: address},
        success: function(data) {

            if(data.status) { //if success close modal and reload ajax table
                list_table();
            } else {
                for (var i = 0; i < data.inputerror.length; i++) {
                    $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
                    $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error getting data from ajax');
        }
    });
});

<input type="file" name="file" id="photo">

My problem is, the file does not upload in the directory. I don't understand what's going on. Any help would be appreciated. Thank you !

Related question: http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery — Abdul Rafay, May 05 '17 at 10:39

score 1 · Accepted Answer · answered May 05 '17 at 17:52

Instead of seeking out the individual components from a form I would suggest using this way. Suppose you provide an 'id' for the form element as "customize_form". Then you can just seek the whole form out of the HTML and upload it to the server. This way you will be able to access the POST elements as a normal form submission

        var form = $('#customize_form')[0];
        var formData = new FormData(form);

        jQuery.ajax({
            type: "POST",
            url: '<?php echo base_url('index.php/welcome/add_contestant/'); ?>',
            data: formData,
processData: false, //These 2 lines are extremely important.
contentType: false, //Will not work without these
            success: function(data){
                if(data.status) { //if success close modal and reload ajax table
                 list_table();
                  } else {
                  for (var i = 0; i < data.inputerror.length; i++) {
                $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
                $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
                     }
                  }
            },
            error: function (jqXHR, textStatus, errorThrown) {
               alert('Error getting data from ajax');
            }
        });

codeigniter jquery ajax file upload

1 Answers1