如何在Codeigniter中使用Ajax上传文件？

Question

我有一个网格，在显示的数据列表中，每一行都有一个编辑操作。

因此，当按下“编辑”按钮时，将打开一个弹出窗口，在此我想更新数据并上传有关此所选行的图像。

数据已成功更新，但图像未保存在文件夹中。

在代码中我做了什么：

在ajax中，我在提交表单时序列化了所有数据，但没有显示上传文件发布数据，因此我正在执行此操作-

var mts = $('#userfile').val();
    var formdata = $('form[name=data_popup]').serialize()+'&IMG_URI='+mts;
    console.log(formdata);

HTML代码：

<form action="#" method="post" enctype="multipart/form-data" name="data_popup">
 <input type="file" name="userfile">
</form>

jQuery代码：

function update_cat(){
    var mts = $('#userfile').val();
    var formdata = $('form[name=data_popup]').serialize()+'&IMG_URI='+mts;
    console.log(formdata);
        $.ajax({
            url: '<?=$this->config->base_url()?>admin_panel/update_data/',
            type: 'post',
            data: formdata
        }).done(function(data) {
      console.log(data);
        });
    }

Codeigniter型号代码：

$this->load->library('upload');
            $config['upload_path'] = "./application/assets/images/logo";
            $config['allowed_types'] = "gif|jpg|png|jpeg";
            $config['file_name'] = date('dmYHis');
            $this->upload->initialize($config);
            $this->load->library('upload', $config);
            $this->upload->do_upload('userfile');
            $data_upload_files = $this->upload->data();
            $image = $data_upload_files[file_name];

Answer 1

使用FormData进行Ajax上传

var formdata = new FormData($('form[name="data_popup"]')[0]);

Answer 2

这应该为您工作。

HTML

<form action="#" method="post" enctype="multipart/form-data" name="data_popup"> <input type="file" name="userfile" id="userfile"> </form>

JavaScript

function update_cat(){
    var formData = new FormData();

    var mts = $('#userfile').get(0).files[0];

    formData.append('userfile', mts);

        $.ajax({
            url: '<?=$this->config->base_url()?>admin_panel/update_data/',
            method: 'post',
            data: formdata,
            processData: false,
            cache: false,
            contentType: false
        }).done(function(data) {
            console.log(data);
        });
}


PHP

<?php

$this->load->library('upload');

$config['upload_path'] = "./application/assets/images/logo";
$config['allowed_types'] = "gif|jpg|png|jpeg";
$config['file_name'] = date('dmYHis');

$this->upload->initialize($config);

$this->upload->do_upload('userfile');

$data_upload_files = $this->upload->data();
$image = $data_upload_files['file_name'];

注意：我在PHP部分没有做太多事情，因为我对要使用该文件没有完全的了解。

还要确保以某种方式调用javaScript函数。