How to implement file upload using Codeigniter and jQuery Ajax?

Question

I want create file upload without refresh pages using Codeigniter and jQuery ajax, as below script.

The mostly I don't know how to begin with Ajax in jQuery, please help to show some idea or step to combine jquery ajax with file upload in codeigniter.

Here is my controller:

<?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'));

        }
    }

}

And this is my form for upload in view:

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

Thanks you very much!!!

Answer 1

This will submit your form via ajax (without page refresh)

$(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)
        {

        }
    });
});

You can check this question Send FormData and String Data Together Through JQuery AJAX?