javascript – Ajax上传不工作的codeigniter

我正在使用codeigniter 3.1.我想使用ajax发布上传数据.

Ajax上传文件无效.但是当我发布没有ajax的简单表单时,它工作正常.

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

  <?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() ?>

JAVASCRIPT

   $('#uploader').submit(function (event) {
            event.preventDefault();
            $.ajax({
                url: window.location.href + '/post',
                type: "POST",
                dataType: 'json',
                data: new FormData(this)
               });
      });

CONTROLLERS

 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'];

  }

解决方法:

其中一个问题是文件上载使用与其他形式不同的机制< input>类型.这就是$this-> input-> post(“userfile”)没有为你完成工作的原因.其他答案建议使用javascript的FormData,这个也是.

HTML

一个非常简单的表单,用于选择文件并提交文件.注意从简单按钮到< input type =“submit”的改变....这样做使得javascript更容易使用FormData对象. FormData documentation

<!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>

JAVASCRIPT

使用FormData捕获字段.
请注意,我们不处理按钮,而是处理提交事件.

$('#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);
        }
    });
});

CONTROLLER

我添加了一些代码,将结果“报告”到ajax并将其显示在上传页面上.

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]);
    }

}

这将上传您的文件.您的工作可能没有完成,因为我怀疑您没有将所需的所有文件信息保存到数据库中.那,我怀疑你会对上传文件的名称感到惊讶.

我建议你研究一下PHP handles file uploads的方法,并在SO上检查文件上传的一些类似的codeigniter相关问题.

javascript – Ajax上传不工作的codeigniter

相关推荐