如何使用Codeigniter和jQuery Ajax实现文件上传？

Question

我想使用Codeigniter和jQuery ajax创建文件上传而没有刷新页面，如下所示。

大多数情况下，我不知道如何在jQuery中以Ajax开头，请帮助显示一些想法或步骤，以将jquery ajax与codeigniter中的文件上传结合起来。

这是我的控制器：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Upload extends Frontend_Controller {

    public function __construct() {

        parent::__construct(); 
    }
    function index()
    {
        $this->data['subview'] = 'employee/cv/upload';
        $this->load->view('_main_layout',$this->data);
    } 
    function do_upload()
    { 
        $config['upload_path'] = 'images/employee/cv';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '10000';
        $config['max_width']  = '1024';
        $config['max_height']  = '768'; 
        $this->load->library('upload', $config); 
        if ( ! $this->upload->do_upload('image'))
        {
            $error = array('error' => $this->upload->display_errors()); 
            $this->data['subview'] = 'employee/cv/upload';
                $this->load->view('_main_layout',$this->data);
        }
        else
        { 
            $data = array('upload_data' => $this->upload->data('image'));

        }
    }

}

这是我要上传的表格：

<div id="container">
        <div class="col-md-12">
            <div class="row" id="image-preview">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12"> 
            <?PHP echo form_open_multipart(base_url('employees/upload/do_upload'),'class="form-horizontal" role="form" id="ajaximageupload"  ')?>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-5 control-label">Add Image</label>
                    <div class="col-sm-7">
                      <input type="file" class="" id="file" placeholder="" name="image">
                    </div>
                  </div>
                  <div class="form-group">
                  <label for="inputPassword3" class="col-sm-5 control-label"></label>
                    <div class="col-sm-7">
                      <input type="submit" name="upload" class="btn btn-primary" value="Upload" />
                    </div>
                  </div>
                </form>

                </div>
            </div>
            <div class="row">
                <div class="progress progress-striped active">
                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                  </div>
                </div>
            </div> 
        </div>
    </div>

非常感谢你！！！

Answer 1

这将通过ajax提交您的表单（不刷新页面）

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',            
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        }
    });
});

您可以检查这个问题，通过JQuery AJAX一起发送FormData和String数据吗？