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调用永远不会完成，并且永远不会返回到“success function（returndata）：”block。

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

  //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 - ＆gt;笨

我总是使用它并且效果很好：）

Answer 3

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

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

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

3 个答案: