如何在CodeIgniter 3.0中使用AJAX上传文件？

Question

I have a form with textboxes and a file upload. When user click the button. The textbox values and file upload name is saved to the database and the files is uploaded to server. I've no experience doing it using AJAX. So, any help is greatly appreciated.

This is my form:

<form enctype="multipart/form-data" accept-charset="utf-8" name="f_complaint" id="f_complaint">
     <input type="text" name="i_complaint" id="id_complaint" class="cl_complaint" />
     <input type="file" name="i_file" id="id_file" class="cl_file" />
     <input type="button" id="btn_upl" value="Save your complaint" class="btn btn-primary" />
</form>

This is my AJAX:

<script src="<?php echo base_url('assets/inspinia/js/jquery-2.1.1.js'); ?>"></script>
<script src="<?php echo base_url('assets/jquery-ui/jquery-ui.js'); ?>"></script>    
<script type="text/javascript">
$(document).ready(function() {
    var url  = "<?php print base_url(); ?>complaint/saveadd";
    $('#btn_upl').on('click', function() {
        var formData = new FormData($(this).parent('form')[0]);
        //alert(url);

        $.ajax({
            url  : url,
            type     : 'POST',
            data     : formData,
            success : function (returndata) {
                alert(returndata);
            }
        });
    });
});
</script>

This is my controller:

public function saveadd() {
    $config['upload_path']      = FCPATH."assets/uploads/";
    $config['max_size']         = '307200';  
    $config['file_name']            = "FILE - ".$_FILES['i_file']['name'];;
    $config['overwrite']        = TRUE;
    $this->load->library('upload', $config);
    $this->upload->initialize($config);
    if ( ! $this->upload->do_upload('i_file')) {
        //return false;
        redirect('app/');
    } else {
        redirect('complaint/add');
    }
}

What's wrong in the code? Even the alert is not fired. I do not want to use plugins

Answer 1

What's wrong in the code? Even the alert is not fired.

Here is whats wrong. 1. Your alert is called on AJAX success, means once ajax call is successfully completed. But in your CI controller you are redirecting the ajax call hence your AJAX call never completes and never returns to "success function (returndata) :" block.

Now,to solve this just replace below code.

  //return false;
  redirect('app/'); replace with,
  echo "upload failed";exit;

AND

 redirect('complaint/add'); replace with
 echo "upload finished";exit;

This return values will be returned in "returndata" js variable.

Answer 2

I suggest you use this library: https://blueimp.github.io/jQuery-File-Upload/basic.html

And in wiki library is instruction for codeigniter: https://github.com/blueimp/jQuery-File-Upload/wiki CTRL+F -> Codeigniter

Always I use it and it works very well :)

Answer 3

Here is the reference of upload file using ajax and codeigniter. I thing it is the best way to upload a file using ajax.

https://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684