codeigniter – jquery ajax upload file

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

download

codeigniter

jquery

jquery.form.js plugin malsup

# extract codeigniter to work folder
$ unzip codeigniter.zip
$ 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>
<html>
<head>
<meta charset="UTF-8">
<title>Form UI</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>

<body>
<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>
    <div class="form-group">
        <div id='imageloadbutton' class="input-sm">
            <input type='file' name='foto' id='fotoImg' />
        </div>
    </div>
    <div class="margin-bottom-20"></div>

</form>
<script>
$(document).ready(function(){

    $('#fotoImg').on('change',
        function(){
            $('#photoForm').ajaxForm({
               
              dataType:  'json',  // dataType identifies the expected content type of the server response
              success:   onSuccess,
              beforeSubmit:function(){
                    $("#imageloadstatus").show();
                    $("#imageloadbutton").hide();
                }
        }).submit();            
    });
    
});

function onSuccess(d){
    $("#imageloadstatus").hide();
    $("#imageloadbutton").show();
}
</script>
</body>
</html> 

# 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(){
        parent::__construct();
    }

    public function simpanImg(){
        
        $rule_upload['upload_path']   = 'uploads';
        $rule_upload['allowed_types'] = 'gif|jpg|png|jpeg';
        $rule_upload['encrypt_name']  = false;
        
        $this->load->library('upload');
        
        $this->upload->initialize($rule_upload);
        
        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

G3n1k

just to remember what i had known :)

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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