Javascript 如何在codeigniter中使用ajax上传文件

我正在尝试使用ajax上传一个文件和其他参数。但是，这些文件没有被上传

表格代码

<form id="first_form" method="post" enctype="multipart/form-data">
    <input type="file" id="file" name="file" accept="image/*" onchange="loadFile(event)">
    <input type="text" data-validation="url" class="form-control" id="first_name" name="first_name" placeholder="First Name" />
    <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" />  
    <input type="image" src="<?php echo base_url(); ?>assets/images/icon/_Save.png" class="Save-container img-circle" id="submit_first_form">
</form>

我在控制台中遇到的错误是：

{状态：“错误”，消息：“您没有选择要上载的文件。”}

谁能告诉我如何上传文件吗

<form id="first_form" method="post" enctype="multipart/form-data">

---

文件上载时键入enctype。

请尝试将此代码用于脚本：

<script type="text/javascript">
    $(document).ready(function() {
    $("#submit_first_form").click(function(event) {
    event.preventDefault();
    var form_data = new FormData($('#first_form')[0]);

    jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "student/add_data",
        data: form_data,
        processData: false,
        contentType: false,
        success: function(res) {
        if (res)
            {
                console.log(res);
            }
        }
    }); }); });
</script>

$（文档）.ready（函数（）{
$（“#首先提交表格”）。单击（功能（事件）{
event.preventDefault（）；
var form_data=新FormData（$（'first#u form'）[0]）；
jQuery.ajax({
类型：“POST”，
url:“+”学生/添加数据“，
数据：表格数据，
processData:false，
contentType:false，
成功：功能（res）{
如果（res）
{
控制台日志（res）；
}
}
}); }); });

->在表单标签中给出id 提交并在表单关闭前添加提交按钮 发送请求的脚本 $（“#保存”）。单击（函数（事件）{ event.preventDefault（）

//创建一个FormData对象
var data1=新表单数据（$（'#fileUploadForm'）[0]）；
log（$（'#fileUploadForm'）；
$.ajax({
类型：“POST”，
enctype:“多部分/表单数据”，
url:“+”学生/添加数据“，
数据：数据1，
processData:false，
contentType:false，
cache:false，
成功：功能（数据）{
data=JSON.parse（数据）；
控制台日志（数据）；
if（data.id==1）
{
setItem（“user\u profile\u pic”，data.user\u pic）；
警报（“已成功更新”）
}
}
});

尝试查看@Vickel的可能重复项尝试解决方案，但仍然存在错误coming@Leo尝试此解决方案后，表单被重新加载，但文件未被上载。我仍收到相同的消息，请您再次检查控制器代码，或者将$file\u element\u name=$data['file']；替换为$file\u element\u name=$\u FILES['file']；希望这能解决问题。尝试在您的if条件下将此更改：（！$this->upload->do\u upload（$file\u element\u name））更改为if（！$this->upload->do\u upload（$file）），您能尝试一下并让我知道输出打印是什么吗（$\u文件）；在您的函数顶部。数组为空，我认为数据无法传递

<form id="first_form" method="post" enctype="multipart/form-data">

<script type="text/javascript">
    $(document).ready(function() {
    $("#submit_first_form").click(function(event) {
    event.preventDefault();
    var form_data = new FormData($('#first_form')[0]);

    jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "student/add_data",
        data: form_data,
        processData: false,
        contentType: false,
        success: function(res) {
        if (res)
            {
                console.log(res);
            }
        }
    }); }); });
</script>

// Create an FormData object
    var data1 = new FormData($('#fileUploadForm')[0]);
      console.log($('#fileUploadForm'));
$.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "<?php echo base_url(); ?>" + "student/add_data",
        data: data1,
        processData: false,
        contentType: false,
        cache: false,

        success: function (data) {
        data = JSON.parse(data);
        console.log(data);
        if(data.id==1)
        {
          localStorage.setItem("user_profile_pic", data.user_pic);

          alert("updated sucessfully")

        }



        }
    });