codeigniter jquery ajax文件上传

时间:2017-05-05 10:25:52

标签: jquery ajax codeigniter

我正在创建一个简单的jquery ajax crud应用程序。以下是我的代码:

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

我的问题是,文件没有上传到目录中。我不明白发生了什么。任何帮助,将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:1)

不是从表单中寻找单个组件,而是建议使用这种方式。假设您提供了一个&#39; id&#39;表单元素为&#34; customize_form&#34;。然后,您可以从HTML中查找整个表单并将其上载到服务器。这样,您就可以像普通表单提交一样访问POST元素

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