如何在 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 函数。