Javascript Ajax上传无法工作的codeigniter

我正在使用codeigniter 3.1。我想使用ajax上传数据

Ajax上传文件不工作。但是当我发布没有ajax的简单表单时，它工作得很好

我不知道为什么，但控制台中没有错误

HTML

  <?php echo form_open_multipart(site_url("upload/post"), ['id' => 'uploader']) ?>
    <input type="file" name="userfile" value="">
    <input type="submit" value="Submit" />
  <?php echo form_close() ?>

控制器

 public function post() 
    {
        $this->load->helper('url');
        $this->load->helper('form');
        $this->load->library("upload");
        $file = $this->common->nohtml($this->input->post("userfile"));

        $this->upload->initialize(array( 
               "upload_path" => 'upload',
               "overwrite" => FALSE,
               "max_filename" => 300,
               "encrypt_name" => TRUE
            ));

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

        $data = $this->upload->data();

        $image_file = $data['file_name'];

  }

试试这个。。 也可以使用

FormData（）

FormData Post文件发布数据。 要获取所有表单输入，包括

type=“file”

，需要使用FormData对象

$('#post').on('click', function (e) {
    var file_data = $("#userfile").prop("files")[0];      
    var form_data = new FormData();                  
    form_data.append("userfile", file_data)
    $.ajax({
            url: window.location.href+'/post',
            type: 'POST',
            data: form_data,
            async: false,
            success: function (data) {
                alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });
   return false;
});

---

欲了解更多…

您需要提交表单，而不是单击提交。。。给表单一个id，然后在提交时放入ajax

HTML

控制器

public function post() 
    {
        $this->load->library("upload");
        $file = $this->common->nohtml($this->input->post("userfile"));
    $this->upload->initialize(array( 
           "upload_path" => 'upload',
           "overwrite" => FALSE,
           "max_filename" => 300,
           "encrypt_name" => TRUE,
        ));

    $data = $this->upload->data();

    $image_file = $data['file_name'];

    $this->data_models->update($this->data->INFO, array(
      "image" => $image_file
        )
      );

---

}

另一种方法是将base64编码的文件传递给PHP：

• 使用

  $（“#userfile'）.prop（'files'）[0]

  从

  #userfile

  字段获取所选文件
• 使用将该文件的内容转换为base64编码的字符串。我们将此称为

  内容

  ；这里展示了如何做，并扩展了答案&可能性
• 发送AJAX，同时传递

  文件名

  和

  内容

  字符串
• 现在在CI上，获取POST数据
• base64_decode（）解码

  内容

• fwrite（）使用

  文件名将结果写入文件

---

这样也可以避免发布所有表单字段。

其中一个问题是，文件上载使用的机制与其他表单类型不同。这就是为什么

$this->input->post（“userfile”）

无法为您完成任务的原因。其他答案建议使用javascript的

FormData

，这一个也一样

HTML

  <?php echo form_open_multipart(site_url("upload/post"), ['id' => 'uploader']) ?>
    <input type="file" name="userfile" value="">
    <input type="submit" value="Submit" />
  <?php echo form_close() ?>

一个非常简单的表单，用于选择文件并提交它。请注意从简单按钮到

控制器的更改

public function upload()
{
$this->load->library('upload');

if (isset($_FILES['myfile']) && !empty($_FILES['myfile']))
{
    if ($_FILES['myfile']['error'] != 4)
    {
         // Image file configurations
        $config['upload_path'] = './upload/';
        $config['allowed_types'] = 'jpg|jpeg|png';
        $this->upload->initialize($config);
        $this->upload->do_upload('myfile');
    }
  }
 }

看法

如果有任何查询
可以，请告诉我，但我有更多的输入，我不想通过ajax发送。有没有只发送文件数据的方法？不工作。获取未捕获的引用错误：未定义formData（…）

未工作。获取“upload:24未捕获类型错误：无法读取未定义（…）1的属性“0”您没有将文件传递给upload类，即，

$file

。初始化后，您应该有类似于

if（！$this->upload->do_upload（'userfile'））{/*code*/}

。检查上传的基本示例。我已经尝试过了，但没有工作。错误是什么<代码>变量转储（'$this->input->post（'userfile'））；exit；检查PHP是否正在获取这些数据。未发现错误。我有更多的输入，所有输入都正常工作，但文件上载不工作。您需要选择是使用AJAX还是默认表单发布。这样，PHP会在JS完成其工作之前重定向页面。如果您想使用AJAX，则需要结合一些JS库进行上载。wh准确地说，发生了什么？获取错误

upload:24未捕获类型错误：无法读取未定义（…）的属性“0”

我想这是我的责任，sry，刚刚编辑了答案。请尝试将

$（'.#userfile'）.attr（'files'）[0]；

替换为

$（'.#userfile'）.prop（'files'）[0]

？仍然不工作。获取错误

未捕获类型错误：非法调用（…）

@Mehur请您将您的函数，我是说代码的JS部分放入JSFIDLE或类似的地方，在那里我们可以更清楚地看到“一切”？这是一个很好的教程。谢谢：）我忘了在回答中提到这一点，但我不得不将上载目录名从

upload

更改为

uploads

。也许你错过了？除了

data\u models->update（）

这是一个模型之外，我没有为我工作的答案代码。你说“不工作”是什么意思？谢谢你现在工作。问题出在我的php中，但我已经解决了：）一切正常，但成功函数不起作用<代码>成功：函数（数据）{console.log（数据）；}未显示。但文件上载正常？是，所有工作正常，但成功函数不工作。

public function post() 
    {
        $this->load->library("upload");
        $file = $this->common->nohtml($this->input->post("userfile"));
    $this->upload->initialize(array( 
           "upload_path" => 'upload',
           "overwrite" => FALSE,
           "max_filename" => 300,
           "encrypt_name" => TRUE,
        ));

    $data = $this->upload->data();

    $image_file = $data['file_name'];

    $this->data_models->update($this->data->INFO, array(
      "image" => $image_file
        )
      );

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="https://code.jquery.com/jquery-2.2.2.js"></script>
        <title>Upload Test</title>
    </head>
    <body>

        <?= form_open_multipart("upload/post", ['id' => 'uploader']); ?>
        <input type="file" name="userfile">
        <p>
            <input type="submit" value="Upload">
        </p>
        <?php echo form_close() ?>

        <div id="message"></div>

        <script>
            $('#uploader').submit(function (event) {
                event.preventDefault();
                $.ajax({
                    url: window.location.href + '/post',
                    type: "POST",
                    dataType: 'json',
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        console.log(data);
                        if (data.result === true) {
                            $("#message").html("<p>File Upload Succeeded</p>");
                        } else {
                            $("#message").html("<p>File Upload Failed!</p>");
                        }
                        $("#message").append(data.message);
                    }
                });
            });
        </script>
    </body>
</html>

$('#uploader').submit(function (event) {
    event.preventDefault();
    $.ajax({
        url: window.location.href + '/post',
        type: "POST",
        dataType: 'json',
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data) {
            //uncomment the next line to log the returned data in the javascript console
            // console.log(data);
            if (data.result === true) {
                $("#message").html("<p>File Upload Succeeded</p>");
            } else {
                $("#message").html("<p>File Upload Failed!</p>");
            }
            $("#message").append(data.message);
        }
    });
});

class Upload extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->helper(['form', 'url']);
    }

    public function index()
    {
        $this->load->view('upload_v');
    }

    public function post()
    {
        $this->load->library("upload");
        $this->upload->initialize(array(
                "upload_path" => './uploads/',
                'allowed_types' => 'gif|jpg|png|doc|txt',
                "overwrite" => FALSE,
                "max_filename" => 300,
                "encrypt_name" => TRUE,
        ));

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

        if($successful)
        {
            $data = $this->upload->data();
            $image_file = $data['file_name'];
            $msg = "<p>File: {$image_file}</p>";
            $this->data_models->update($this->data->INFO, array("image" => $image_file));
        } else {
            $msg = $this->upload->display_errors();
        }

        echo json_encode(['result' => $successful, 'message' => $msg]);
    }

}

public function upload()
{
$this->load->library('upload');

if (isset($_FILES['myfile']) && !empty($_FILES['myfile']))
{
    if ($_FILES['myfile']['error'] != 4)
    {
         // Image file configurations
        $config['upload_path'] = './upload/';
        $config['allowed_types'] = 'jpg|jpeg|png';
        $this->upload->initialize($config);
        $this->upload->do_upload('myfile');
    }
  }
 }

<form id="myform" action="<?php base_url('controller/method'); ?>" method="post">
<input type="file" name="myfile">

("#myform").submit(function(evt){
evt.preventDefault();

var url = $(this).attr('action');
var formData = new FormData($(this)[0]);
$.ajax({
    url: url,
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (res) {
        console.log(res);
    },
    error: function (error) {
        console.log(error);
    }
}); // End: $.ajax()           

}); // End: submit()