Codeigniter - Ajax : Simple Upload File menggunakan jQuery Form Plugin

Pada kali ini saya mau sharing mengenai salah satu cara upload file menggunakan Codeigniter dan jQuery. Untuk plugin jQuery bisa didapat disini atau mirror.

Pada tahap awal buat view terlebih dahulu

<div class="msg"></div> 
<form action="#" id="myForm" method="POST">
 <div id="body">
  <input type="file" name="userfile" id="userfile" class="WArarea" size="50px"/>
  <input type="submit" value="Upload" />
 </div>
</form>
<script type="text/javascript">
 $('#myForm').ajaxForm({
 url:'<?php echo site_url("contoh/upload_file");?>',
 type: 'post',
 dataType: 'json',
 resetForm: true,
 beforeSubmit: function() {
  $('.msg').html('Submitting...');
 },
 success: function(data) {
  if(data.status){
   $('.msg').html('<span style="color:blue">'+data.msg+'</span>')
  }else{
   $('.msg').html('<span style="color:red">'+data.msg+'</span>')
  }
 }
});
</script>

Kemudian untuk controllernya

function _conf_upload(){
 $config['upload_path'] = "./uploads/";
 $config['allowed_types'] = "doc|docx|pdf|xls|xlsx";
 $config['max_size'] = "2048";
 $this->load->library('upload');
 $this->upload->initialize($config);
}
function upload_file(){
 $this->_conf_upload();
 if ( ! $this->upload->do_upload()){  // cek apakah ada file yg diupload
  $status = array('status' => false, 'msg' => $this->upload->display_errors());
 }else{
  $file = $this->upload->data();
  // pura-puranya disini ada sebuah proses mengenai file yg d upload.
  $status = array('status' => true, 'msg' => 'Tugas berhasil di upload');
 }
 echo(json_encode($status));
}

Nah, cukup simpel kan untuk upload file menggunakan Ajax dengan plugin jQuery.

Cukup sekian tips nya... :D

Untuk menghargai HKI(Hak Kekayaan Intelektual), sumber referensi yang saya pakai dan saya pelajari akan ditampilkan.
Referensi    : http://jquery.malsup.com/form/
Author        : Moch. Zawaruddin Abdullah, www.zawaruddin.blogspot.com