Codeigniter 图片上传使用 jquery 和 ajax 错误 [重复]

Question

我需要有关以下查询的指导。
我正在尝试上传文件或将文件移动到所需的目录，但它失败了。在表单上，​​除了 input['file'] 数据之外，所有其他字段数据都传递给控制器​​。
请通过以下代码。

查看：
使用 Bootstrap Modal 显示表单，只发布最少的代码

<form method="post" action="<?php //echo base_url().'admin/students/update_accomodation'; ?>" id="accform" enctype="multipart/form-data">
        <div class="form-group">
            <div class="row">
                    <div class="col-md-2">
                        <label>Students</label>
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="student" value="" />
                    </div>  
                    <div class="col-md-2">
                        <label>Room</label>
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="room" value="" />
                    </div>
            </div>      
        </div>
        <div class="form-group">
            <div class="row">
                    <div class="col-md-2">
                        <label>Stay</label>
                    </div>
                    <div class="col-md-4">
                        <select name="stay" class="form-control" id="stay">
                            <option value="1">1 Month</option>
                            <option value="2">2 Month</option>
                            <option value="3">3 Month</option>
                            <option value="4">4 Month</option>
                            <option value="5">5 Month</option>
                            <option value="6">6 Month</option>
                            <option value="7">7 Month</option>
                            <option value="8">8 Month</option>
                            <option value="9">9 Month</option>
                            <option value="10">10 Month</option>
                            <option value="11">11 Month</option>
                            <option value="12">12 Month</option>
                            <option value="18">18 Month</option>
                            <option value="24">24 Month</option>
                            <option value="36">36 Month</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label>Upload PDF</label>
                    </div>
                    <div class="col-md-4">
                        <input type="file" name="file" id="file" class="btn btn-default btn-file" />
                    </div>
            </div>  
        </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary accomodation">Submit</button>
  </div>
    </form>

阿贾克斯
在同一页面和页脚中，jquery.js 文件正在完美加载，并且文件以外的字段数据也传递给控制器​​。

<script>
$(document).ready(function()  {
    $(".accomodation").click(function(event)  {
        event.preventDefault();
        //var formData = $('#accform').serialize();
       // var formData = new FormData($(this)[0]);
        //var formData = $('#accform').formSerialize();
        //console.log(formData);
        //alert(JSON.stringify(formData));
        $.ajax({
            type: "POST",
            url: "<?php echo site_url('admin/students/update_accomodation'); ?>",
            data: $('#accform').serialize(),
            //data: new FormData($("#accform")[0]),
            processData: false,
            success: function(res)  {
                //var json = JSON.parse(res);
                var parsed = res;
                console.log(parsed);
                if(parsed.status_code == 1) {
                    alert('data inserted successfully');
                    window.location.href = "<?php echo site_url('admin/bookings'); ?>";
                }else {
                    alert(parsed.status);
                }
            }

        });
    });       
});

控制器

function update_accomodation()  {
    //form input validation
    $this->form_validation->set_rules('student_id','Student ID','trim|required');
    $this->form_validation->set_rules('room_id','Room ID','trim|required');
    $this->form_validation->set_rules('stay','stay','required');
    if (empty($_FILES['file']['name'])) {                        //check file is selected
        $this->form_validation->set_rules('file','File','required');
    }
    if($this->form_validation->run() == FALSE)  {               //form validation false
        $data = array(
            'status' => validation_errors(),
            'status_code' => 2
        );
        echo json_encode($data);
    }   else    {          
        //echo json_encode(array('data' => $_FILES['file']['name']));
        //form validation true
        if (0 < $_FILES['file']['error']) {
            $data = array(
                'status' => 'File uploading error',
                'status_code' => 3
            );
            echo json_encode($data);
    }   else    {
            $sourcePath = $_FILES['file']['tmp_name'];          //filename="file" 
            $targetPath = "uploads/students/contracts/".rand(0,10000).$_FILES['file']['name'];      //targetpath with random number as prefix
            move_uploaded_file($sourcePath,$targetPath);                                //move file to target folder
            $data1 = array(                                             //take inputs
                'stay' => $this->input->post('firstname'),
                'id_upload' => $targetPath
            );
            $data = array(
                'status' => 'upload successfully',
                'status_code' => 1
            );
            echo json_encode($data);
    }
}
}

我遇到了什么错误：
1) input['file'] 值没有被传递，只有 input['text'] 和其他值被传递。
2) 输入['file'] 的表单验证错误（因为文件值未通过而关闭）。

到目前为止我做了什么：
1）我尝试了多种类型来接受表单数据，我用ajax评论它。
2) 我试过 jquery.form.min.js 插件（链接：http://malsup.com/jquery/form/）。使用此插件后，输入 ['file'] 值可以得到接受（在控制台中跟踪）但未传递给控制器​​，得到错误未定义变量：文件。
3) ProcessData: false, contentType: false, 也使用。
4) enctype="multipart/form-data" 也包括在内。

最后一件事 上面的代码在另一个控制器上完美运行并在现有项目中查看，我复制了相同的代码，但它不适用于当前控制器。需要帮助，谢谢。

用户建议的更新 AJAX 代码：但它对我不起作用，因为 null 值会传递给控制器​​

<script>
$(document).ready(function()  {
    $(".accomodation").click(function(e)  {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: "POST",
            url: "<?php echo site_url('admin/students/update_accomodation'); ?>",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(res)  {
                console.log(res);
            }

        });
    });       
});

接受更正的答案 以下回答对我有用，非常感谢。

var form = $('#accform');
var formData = new FormData(form[0]);

相反

var formData = new FormData(this);

Answer 1

.serialize() 不能接受使用 Jquery 和 Axaj 上传文件。

为了实现这个使用

$(document).ready(function (e) {
    $('.accomodation').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));
  }));