codeigniter – jquery ajax upload file

using jquery to upload file using ajax method, and using CodeIgniter to process upload data




jquery.form.js plugin malsup

# extract codeigniter to work folder
$ unzip
$ mv codeigniter /media/sf_websocket/

# add folder uploads in
$ cd /media/sf_websocket/
$ mv codeigniter vsp
$ mkdir vsp/uploads -p

# create client form ajax for interface
$ mkdir  /media/sf_websocket/client -p

# go to client folder
$ cd /media/sf_websocket/client

# create file form.html
$ nano /media/sf_websocket/client/form.html

paste code

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Form UI</title>
<script src=""></script>
<script src=""></script>

<form  method="post" id='photoForm' enctype="multipart/form-data" class="form-horizontal" role="form" action='localhost/vsp/client/simpanImg';?>'>
    <div id='imageloadstatus' style="display:none;">
            <img src="loader.gif" />
    <div class="form-group">
        <div id='imageloadbutton' class="input-sm">
            <input type='file' name='foto' id='fotoImg' />
    <div class="margin-bottom-20"></div>


              dataType:  'json',  // dataType identifies the expected content type of the server response
              success:   onSuccess,

function onSuccess(d){

# create controller for accept upload
$ nano /media/sf_websocket/vsp/application/controllers/client.php

paste code

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Client extends CI_Controller {

    function __construct(){

    public function simpanImg(){
        $rule_upload['upload_path']   = 'uploads';
        $rule_upload['allowed_types'] = 'gif|jpg|png|jpeg';
        $rule_upload['encrypt_name']  = false;
        if ( $this->upload->do_upload('foto')) $data = array('upload_data' => $this->upload->data());
        else $data['error'] = $this->upload->display_errors();
        echo json_encode($data);


Published by


just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s