Codeigniter 输入文件返回空以使用 jQuery ajax 发布表单

Question

我正在尝试用l框架CodeIgniter，jQuery ajax上传文件到服务器，但是我提交的表单返回空图像字段，并且图片不起来。

感谢您的帮助。

这里是代码

控制器：

public function do_upload()
{
    //Check if isset request AJAX
    if( ! $this->input->is_ajax_request() ) {
        show_404();
    }

    //Config upload files
    $config = array(
                    'upload_path'   => './assets/files/',
                    'allowed_types' => 'jpg|jpeg|png|gif',
                    'max_size'      => '2048 ',
                    'overwrite'     => TRUE,
                    'remove_spaces' => TRUE
                    );

    //Load library
    $this->load->library('upload', $config);

    if ( ! $this->upload->do_upload('imagen') ) {

        $error = array(
                        'respuesta' => FALSE,
                        'message'   => $this->upload->display_errors()
                      );
        echo json_encode( $error );
    }
    else{
        $config = array(
                        'respuesta' => TRUE,
                        'message'   => 'Completado!'
                        );
        echo json_encode( $config );
    }


}

查看：

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 col_right">
<div class="ctn">
  <h3>Subir contenido al servidor</h3>

    <form action="" method="POST" id="form_file" name="form_file" enctype="multipart/form-data">

        <div class="form-group">
            <input type="file" name="imagen" id="imagen">
        </div>

        <button type="button" id="btn_form" class="btn btn-primary">Subir imagen</button>
    </form>

</div><!--End ctn-->

脚本 Jquery Ajax：

$(function() {

  $('#btn_form').on('click', function(event) {

    //Serialize form
    var form_serialize = $("#form_file").serialize();
    alert(form_serialize);

    $.ajax({
        beforeSend: function () {

        },
        cache: false,
        type: "POST",
        dataType: "json",
        url: "/file/do_upload/",
        data: form_serialize + "&id=" + Math.random(),
        success: function (response) {

            if (response.respuesta == true) {
                alert(response.message);
            }

            if (response.respuesta == false) {
                alert(response.message);
            }

        },
        error: function () {
            alert('SYSTEM ERROR, TRY LATER AGAIN');
        }
    });
  });

});

Answer 1

你必须这样做

将按钮类型更改为submit,,

改变jquery函数

$(function () {
            $('#form_file').on('submit', function (e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
//                    cache: false,
                    type: "POST",
                    //  dataType: "json",
                    processData: false,
                    contentType: false,
                     url: "/file/do_upload/",
                    data: formData,
                    success: function (response) {
                        if (response.respuesta == true) {
                            alert(response.message);
                        }
                        if (response.respuesta == false) {
                            alert(response.message);
                        }
                    },
                    error: function () {
                        alert('SYSTEM ERROR, TRY LATER AGAIN');
                    }
                });
            });
        });