Ajax File Upload (CodeIgniter dan JQuery)

Ditulis pada 25 Jun 2009 dalam kategori Ajax, dibaca 1394 kali dan ditanggapi 16 kali

Setelah sekian lama pending, alhamdulillah saya ada waktu sedikit untuk menulis artikel sederhana ini. Kebetulan kemarin saya chatting dengan teman dan dia memberikan ide untuk menulis artikel tentang upload file dengan Ajax. Walaupun sebenarnya saya juga bingung, tetapi akhirnya saya berhasil membuatnya, --memodifikasi, :D -- berawal dari sebuah artikel di sini.

Langsung saja saya berikan langkah-langkah dan penjelasan semampu saya.
Sebenarnya, pembuatan controller dan view untuk "halaman upload" ini tidaklah berbeda jauh dengan panduan di user guide CodeIgniter. Penambahan yang diberikan adalah pada proses uploadnya. Kita tambahkan fungsi javascript yang akan dieksekusi ketika button upload ditekan.
Kita buat form upload (upload_form.php) terlebih dahulu. (Mohon maaf banyak yang diremove oleh CI, silakan lihat di file yang saya sertakan di akhir artikel ini)

<html>
<head>
<title>Upload Form</title>
[removed][removed]
[removed][removed]
[removed]
function ajaxFileUpload()
 {
  $("#loading")
  .ajaxStart(function(){
   $(this).show();
  })
  .ajaxComplete(function(){
   $(this).hide();
  });
 
  $.ajaxFileUpload
  (
   {
    url:'<?php echo site_url()?>/upload/do_upload',
    secureuri:false,
    fileElementId:'fileToUpload',
    dataType: 'json',
    success: function (data, status)
    {
     if(typeof(data.error) != 'undefined')
     {
      if(data.error != '')
      {
       $("#info").html(data.error);
      }else
      {
       $("#info").html(data.msg);
      }
     }
    },
    error: function (data, status, e)
    {
     $("#info").html(e);
    }
   }
  )
 
  return false;
 
 }
[removed] 
</head>
<body>
 
<form name="form" acti>
 
<input id="fileToUpload" type="file" name="fileToUpload" size="20" />
 
<br /><br />
 
<button class="button" id="buttonUpload" >Upload</button>
 
</form>
 
<img id="loading" src="<?php echo base_url()?>asset/images/loading.gif" style="display:none;">
<div id="info"></div>
 
</body>
</html>

Perbedaan yang tampak adalah adanya beberapa file .js dan satu fungsi javascript yang ditambahkan. Sekarang kita buat controller...

class Upload extends Controller {
 
 function Upload()
 {
  parent::Controller(); 
 }
 
 function index()
 {
  $this->load->view('upload_form');
 }
 function do_upload()
 {
   $error = "";
   $msg = "";
  $config['upload_path'] = './upload/';
  $config['allowed_types'] = 'doc|xls|ppt|pdf|rar|zip';
  $config['max_size'] = '1000';   
 
  $this->load->library('upload', $config);
  $this->upload->display_errors('','');
 
  if ( ! $this->upload->do_upload("fileToUpload"))
  {       
       $error = $this->upload->display_errors();
  } 
  else
  {
        $msg = "File berhasil diupload";
  }
  echo "{";
   echo    "error: '" . $error . "',\n";
   echo    "msg: '" . $msg . "'\n";
   echo "}";
 }
}

Jangan lupa untuk membuat folder "upload" dalam direktori yang sama dengan index.php. Terlihat mudah bukan?Silakan dicoba. Anda juga dapat mendownload paket file lengkapnya disini (pass:putraweb.net) .

What the others say?

Sampai saat ini ditanggapi 16 kali

Dari Chat on 25 June 2009 16:07:03

Thanks mas anggy... Mantaf...artikelnya!! Sangat membantu. Pending nya jangan lama2 donk... Penggemar pada nunggu niy..!!

Ditunggu artikel berikutnya, jarang soalnya web yg membahas CI.

Anggy Trisnawan on 25 June 2009 16:11:15

Ok...thanks...oya itu yang di artikel ada yang di [removed]...supaya jelas diliat di file download ya...

Lagi-lagi on 26 June 2009 0:45:00

Iya saya sudah lihat. Yang javascript nya ilang ya? Hahaha takut ke load jadi di remove.

Oya itu otomatis di remove saat nulis atau mas anggy hapus manual tuh ? keren jg kalau di hapus sama Ci nya langsung.

Anggy Trisnawan on 28 June 2009 11:23:30

otomatis kok...dihapus ma CI..

ade on 28 June 2009 17:51:56

Passwordnya apa mas, kok pas d extract minta password ???

Anggy Trisnawan on 28 June 2009 21:42:43

lupa...passwordnya : putraweb.net

supri on 25 July 2009 11:07:20

mas.. saya pernah belajar, dan sempat membuat beberapa aplikasi menggunakan framework zend, memang enak dengan mvc tapi librarynya itu bikin ukuran aplikasi keseluruhan jadi besar, bagaimana dengan codeigniter? rasanya saya tertarik untuk mencoba nih

Anggy Trisnawan on 04 August 2009 17:07:51

mmm...menurut saya, CI tidak berlebihan dalam 'keharusan' menyertakan library dalam aplikasi yang kita buat, jadi lebih ringan...sebaiknya anda mencobanya dulu..

Chooey on 02 September 2009 21:33:05

Klo Upload video gimana mas?

Anggy Trisnawan on 05 September 2009 5:24:01

sepertinya video jg file kan?

Zak on 09 September 2009 22:34:36

Mas kalau mau langsung di simpan ke database gimana mas ?? misal nama file nya gitu ??? Terangin donk

Anggy Trisnawan on 16 September 2009 10:36:50

Bisa juga. Tambahkan saja kode untuk menyimpan informasi file ke dalam database pada fungsi do_upload.

else
{
   $msg = "File berhasil diupload";
   // tambahkan kode disini
}

Good Luck!

khancute on 05 October 2009 1:18:40

bro klo untuk multiple file upload itu fileElementId nya jadi array ato gmana?

Ikhsan on 21 November 2009 0:32:11

Bro, padahal domain ini bagus bgt di Search EngineNya,, kq pindah? btw, apa nh rahasiaNya biar bisa Top of the top di Search engine

agung on 07 January 2010 13:18:23

belum ngerti nih . baru nyoba tp gimana caranya pasang di htdocnya.. tolong dong YM : skywave1380@yahoo.com.sg

Adi on 29 January 2010 11:08:44

Terima kasih banyak ilmunya.....

Do you wanna say a few words?

Latest Article

Lima artikel terakhir dari Putraweb.Net

Resources

Beberapa link yang menarik

Categories

Kategori Artikel di Putraweb.Net.

Popular Article

Artikel yang memiliki hits terbanyak.

Last Comments

Beberapa tanggapan terakhir di Putraweb.Net.

Just Info

Archives

Arsip Artikel di Putraweb.Net.