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

Question

我有一个带有文本框和文件上传的表单。 当用户单击按钮时。 文本框值和文件上载名称已保存到数据库，文件已上载到服务器。 我没有使用AJAX进行操作的经验。 因此，非常感谢您的帮助。

这是我的表格：

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

这是我的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>

这是我的控制器：

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

代码有什么问题？ 甚至警报也不会触发。 我不想使用插件

Answer 1

代码有什么问题？ 甚至警报也不会触发。

这是怎么了 1.在AJAX成功时调用警报，这意味着ajax调用一旦成功完成。 但是在您的CI控制器中，您正在重定向ajax调用，因此您的AJAX调用永远不会完成，也永远不会返回到“成功函数（returndata）：”块。

现在，要解决此问题，只需替换下面的代码。

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

和

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

此返回值将在“ returndata” js变量中返回。

Answer 2

我建议您使用此库： https : //blueimp.github.io/jQuery-File-Upload/basic.html

并且在Wiki库中是codeigniter的指令： https : //github.com/blueimp/jQuery-File-Upload/wiki CTRL + F-> Codeigniter

我一直都用它，效果很好:)

Answer 3

这是使用ajax和codeigniter上传文件的参考。 我认为这是使用ajax上传文件的最佳方法。

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