Upload Gambar dengan jquery(ajax) dan Codeigniter

Setelah beberapa hari searching di web, akhirnya saya temukan cara upload dengan jquery(ajax), dan sedikit kostumisasi code dari saya tentunya...

Pada upload kali, file yg di browse, langsung ditampilkan di halaman web.

Istilahnya seperti onchange pada javascript. File Gambar yg diupload oleh ajax, langsung ditampilkan di halaman yg sama tanpa refresh


Sudah cukup basa-basinya, mari kita lanjutkan codingnya.. :D

Script upload pada Controller, kita beri nama Controller ini Controller aktivitas..

berikut fungsi yang digunakannya.. Pastikan direktori uploads ada dan posisinya sejajar dengan index.php milik CI.

.

.

.

function do_upload() {

$this->load->helper('file');

$config['upload_path'] = './uploads/';

$config['allowed_types'] = 'gif|jpg|png';

$config['max_size'] = '1000';

$config['max_width'] = '1024';

$config['max_height'] = '768';

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

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

$error = array('error' => $this->upload->display_errors());

print_r($error);

}

else {

$data = array('upload_data' => $this->upload->data());

}

}

.

.

.

fungsi ini bisa anda dapatkan di user guide codeigniter anda, dan bisa anda copy paste langsung ke controller anda.

selanjutnya, siapkan view dengan code sbb.

.

.

< input type="file" name="upload_file" id="upload_file" onchange="'upload_euy()'" >

.

dan ini adalah script javascript/ajaxnya.. letakkan script ini pada view yang sama dengan view pada form input file diatas.

function upload_euy(){

$u("#upload_file").change(function(e){

$u= jQuery.noConflict();

value=$u("#upload_file").val();//.replace(' ', '_');

var arrTemp = value.split('\\');

value = arrTemp[arrTemp.length - 1];

alert(value);

$u("#loading")

.ajaxStart(function(){

$u("#loading").show();

})

.ajaxComplete(function(){

$u("#loading").hide();

});

$u.ajaxFileUpload(

{

url:'<\?\php? echo base_url()?>/aktivitas/do_upload',

secureuri:false,

fileElementId:'upload_file',

dataType: 'json',

beforeSend:function()

{

$u("#loading").show();

},

complete:function()

{

$u("#foto").html('<\?php\?> echo base_url()?>uploads/'+value+'"');

$u("#loading").hide();

},

success: function (data, status)

{

if(typeof(data.error) != 'undefined')

{

if(data.error != '')

{

}

}

},

error: function (data, status, e)

{

}

}

)};

.

.

File js yang dibutuhkan seperti ajaxfileupload.js, jquery.js, bisa anda cari di 
http://valums.com/ajax-upload/ dan http://jquery.com/


happy coding, everyone..