Ajax File Upload (CodeIgniter dan JQuery)

Sep 27, 2009 // by anggie // Ajax, CodeIgniter // 43 Comments

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.

if ( ! defined('BASEPATH')) exit('No direct script access allowed');?>
<html>
	<head>
		<title>JQuery - CodeIgniter File Upload Demo</title>
	<link href="<?php echo base_url()?>asset/style/ajaxfileupload.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="<?php echo base_url()?>asset/js/jquery.js"></script>
	<script type="text/javascript" src="<?php echo base_url()?>asset/js/ajaxfileupload.js"></script>
	<script type="text/javascript">
	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;
	}
	</script>
	</head>
	<body>
<div id="wrapper">
    <div id="content">
    	<h1>JQuery - CodeIgniter File Upload Demo</h1>
    	<p>Upload file using CodeIgniter File Uploading Class and JQuery</p>
				<p>
				Need any Web-based Information System?<br> Please <a href="http://www.putraweb.net/about">Contact Us</a><br>  	
		<form name="form" action="" method="POST" enctype="multipart/form-data">
		<table cellpadding="0" cellspacing="0" class="tableForm">
		<thead>
			<tr>
				<th>Please select a file and click Upload button</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>			</tr>
		</tbody>
			<tfoot>
				<tr>
					<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
				</tr>
			</tfoot>
	</table>
		</form>
		<img id="loading" src="<?php echo base_url()?>asset/images/loading.gif" style="display:none;">
		<div id="info"></div>
    </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) .

Tags: Ajax, JQuery, tutorial codeigniter

• Twitter • StumbleUpon • Digg • Delicious • Facebook

43 Comments

walk 28/09/2009 at 11:57 pm

mas…klo misalnya saya pake database … trus yg didatabase cuma nampilin namanya doang…nah trus klo mo hapus nya gimana ya mas … saya udah buat cuma bisa hapus namnya yg di database aja file di foldernya ngga ke apus… supaya bisa ke apus gimana ya mas… say udah muter² pake unlink ga bisa mass… helpppp ~ ASAP …

tengs ya masssss~
anggie 29/09/2009 at 12:15 am

Coba pergunakan ‘file helper’ yang telah disediakan, yaitu fungsi delete_files.
delete_files(‘./path/ke/folder/’);
Untuk memudahkan dalam pelaksanaannya, ketika mengupload file selain menyimpan nama file, simpan juga path ke file, dengan key ‘full_path’ yang array-nya dapat diperoleh dari $this->upload->data(). Baca user guide bagian ‘File Uploading Class’ untuk lebih jelasnya. Selamat mencoba.
walk 30/09/2009 at 10:14 pm

wes isa mas… tengs ya … besok² klo nanya lg mohon bantuan nya ya masss … maturnuwun
anggie 30/09/2009 at 11:20 pm

Ok…sama-sama.
walk 02/10/2009 at 11:54 pm

mas…mo tanya lg… hehehee… maaf ya mas kebanyakan nanya nih…

misalnya saya mo tampilin tabel database hasil uploadnya dalam bentuk popup gitu pake ajax gimana ya mas ?? ….

sebelumnya tengs ya mas :)
anggie 03/10/2009 at 9:40 am

Klo saya biasa pakai jQuery. Tersedia banyak plugin untuk itu, salah satunya http://plugins.jquery.com/project/jQpopup.
walk 04/10/2009 at 1:10 am

mass…need help lg … saya dah coba2… pake jQpopup trus pake thickbox … ngga bisa kluar2 mas popupnya …tolong bantuin dong mas … saya bingung d controller sama view nya tuh T__T … pleasee ….
khancute 05/10/2009 at 1:23 am

mas klo untuk multiple file upload fileElementId itu jadi array ato gmana??
ghprod 14/11/2009 at 7:14 pm

wah mantaabb bro :D

makasih ilmunya ya.. hari ini baru mulai blajar CI ni :)

salam
ojie permana 24/11/2009 at 1:48 pm

mas saya mau nanya…

saya punya table user dan fieldnya
-id
-nama
-pass
-photo

saya maunya ketika saya mengunakan ajax form untuk menyimpan data tersebut….tapi karena saya ingin upload file maka fungsi ajax form tersebut tidak bisa digunkan….

ada ngak solusi ini mas….saya inginnya tetap menggunakan ajaxnya dan saya bisa upload filenya dan simpan datanya ke database

terima kasih mas
anggie 24/11/2009 at 2:40 pm

Saya punya sistem yang seperti itu juga, solusi saya begini. Pertama, anda upload filenya, trus simpan nama file/informasi ke session (bila perlu), lalu munculkan form baru untuk menyimpan informasi tambahan bila diperlukan.
chooey 11/12/2009 at 6:48 pm

Maaf mau tanya..
kalau mau nambahin deskripsi gimana ya?(selain upload konten juga menyertakan deskripsi)..thanks
Anggy Trisnawan 12/12/2009 at 5:11 pm

Pertama, anda upload filenya, trus simpan nama file/informasi ke session (bila perlu), lalu munculkan form baru untuk menyimpan informasi tambahan(deskripsi, nama file) bila diperlukan.
chooey 14/12/2009 at 3:11 pm

tidak bisa langsung disimpan bersama dengan filenya ya Mas?
anggie 15/12/2009 at 3:24 pm

Tidak bisa…
chooey 15/12/2009 at 8:44 pm

Oke, terima kasih atas pencerahannya..Sukses ya..
mask 16/12/2009 at 12:58 pm

Udah nemuin cara multidimensiaonal upload blom? klo gw pake ini: http://www.mitesdesign.com/blog/open-source/multi-upload-jquery-code-igniter
agung 25/02/2010 at 3:41 pm

kalo cara nampilin file yang udah di upload gmn????
ardianz 09/04/2010 at 4:22 pm

ijin sedot ya mas
anggie 09/04/2010 at 4:55 pm

Silakan…makasih dah berkunjung…
hendra 12/05/2010 at 5:40 pm

mas mau tanya donk..
ada form untuk upload berita disitu ada field untuk upload gambar.
nah di CI kalo kita buat script upload dia harus upload gambarnya kalo gk dikasih warning.
saya mau kalo dia gk upload gambar gimana…????

nih kode nya CONTROLLER

function create(){
if($this->input->post(‘submit’)){

$config['upload_path'] = ‘./uploads/’;
$config['allowed_types'] = ‘gif|png|jpg’;
$config['max_size'] = ’1000′;
$config['max_width'] = ’1024′;
$config['max_height'] = ’768′;

$this->load->library(‘upload’,$config);
if($this->upload->do_upload(‘userfile’)!= “”){
if(!$this->upload->do_upload(‘userfile’)){
$data['error'] = $this->upload->display_errors();
$data['title'] = ‘Create Post’;
$data['main'] = ‘admin_post_create’;
$data['cats'] = $this->MCats->getCategoriesDropDown();
$this->load->vars($data);
$this->load->view(‘template_dashboard’);
}else{
$dok = $this->upload->data();
$data['upload_data'] = $dok;

if($dok['file_name']){
$dokfile = ‘/uploads/’.$dok['file_name'];
}

$this->MPosts->addPosts($dokfile);
$this->session->set_flashdata(‘message’,'Post created’);
redirect(‘webadmin/posts/index’,'refresh’);
}
}else{
$this->MPosts->addPosts1();
$this->session->set_flashdata(‘message’,'Post created’);
redirect(‘webadmin/posts/index’,'refresh’);
}
}else{
$data['title'] = ‘Create Post’;
$data['main'] = ‘admin_post_create’;
$data['cats'] = $this->MCats->getCategoriesDropDown();
$this->load->vars($data);
$this->load->view(‘template_dashboard’);
}
}

MODEL NYA NIH HHHH…

function addPosts($dokfile){
$now = date(“Y-m-d H:i:s”);
$data = array(
‘title’ => trim(strip_tags($this->input->post(‘title’))),
‘tags’ => $this->input->post(‘tags’),
‘status’ => $this->input->post(‘status’),
‘body’ => $this->input->post(‘body’),
‘images’ => $dokfile,
‘category_id’ => $this->input->post(‘category_id’),
‘user_id’ => $_SESSION['user_id'],
‘pubdate’ => $now
);

$this->db->insert(‘posts’,$data);
}

function addPosts1(){
$now = date(“Y-m-d H:i:s”);
$data = array(
‘title’ => trim(strip_tags($this->input->post(‘title’))),
‘tags’ => $this->input->post(‘tags’),
‘status’ => $this->input->post(‘status’),
‘body’ => $this->input->post(‘body’),
‘category_id’ => $this->input->post(‘category_id’),
‘user_id’ => $_SESSION['user_id'],
‘pubdate’ => $now
);

$this->db->insert(‘posts’,$data);
}

nih VIEW NYAKS yakssss

<?php
if(isset($error)){
echo $error;
}
echo form_open_multipart('webadmin/posts/create');
echo "Title”;
$data = array(‘name’=>’title’,'id’=>’ptitle’,'size’=>25);
echo form_input($data) .”";

echo “Tags”;
$data = array(‘name’=>’tags’,'id’=>’ptags’,'size’=>25);
echo form_input($data) .”";

echo “Category “;
echo form_dropdown(‘category_id’,$cats) .”";

/*echo “Images “;
echo ”;
*/

echo “Content”;
$data = array(‘name’=>’body’,'id’=>’long’,'rows’=>5, ‘cols’=>’40′);
echo form_textarea($data) .”";

echo “Status”;
$options = array(‘draft’ => ‘draft’, ‘published’ => ‘published’);
echo form_dropdown(‘status’,$options) .”";

echo form_submit(‘submit’,'create post’);
echo form_close();

?>

gw mau validasi untk user yang gk upload
kalo kode diatas validasi nya user harus upload gambar…
gw mau kalo user kalo gk upload gk papa gan..
help…
Anggie 19/05/2010 at 4:41 pm

mm…mungkin, pertama kali yang anda lakukan adalah menentukan apakah user mengupload image ato tidak, baru load class upload (jika user mengupload)
student 13/08/2010 at 2:20 pm

Mas anggie, padahal folder asset, file controller, n file view udah ak copy. Tapi kok loadingnya gak berhent2 yaow? Padahal kl ak jalanin punya mas Anggie, bisa jalan dengan baik. Ada configurasi yang lain kah?
Andris 19/08/2010 at 10:31 am

sblumnya thanks tutorialnya….
btw dah aq coba…
tapi untuk file type “.doc”, “.xls” kok ndak bisa diupload ya…
pdhal pada mime.php udah ada arraynya…
punya mas juga ndak bisa…
bisa coba dicek lagi…
anggie 20/08/2010 at 11:20 pm

@student: library nya? model? pastikan config file nya juga udah dirubah

@Andris: saya juga mengalaminya :P…maaf juga, kadang bisa kadang engga…solusi? saya belum menemukannya.
rendy 09/09/2010 at 3:00 pm

mas boleh minta file lengkap’a gak buat yg upload aj..sy mw sidang mas sbntar lg..mohon bantuan’a y..makasih..
anggie 14/09/2010 at 10:27 am

Silakan download aplikasi saya, di posting2 terakhir…ada modul untuk file uploadnya.
rendy 20/09/2010 at 10:57 am

yang “Sharing Script CI 1.7.2 untuk Sistem Informasi” y mas?
rendy 20/09/2010 at 11:04 am

password’a ap y mas…maklum nwebie…:D
rendy 20/09/2010 at 11:13 am

udah bisa mas..Makasiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii y…hhe
Daffy 26/10/2010 at 9:12 am

mas mau tanya kalo upload,,terus memunculkan gambar setelah d browse tapi sebelum di upload gmn ya mas?
sperti facebook,,
trims b4,,
vinzz 07/11/2010 at 8:29 pm

mas mau tanya dong. kalo mao upload file yg gede gitu gmana y caranyaa?

thx
anggie 09/11/2010 at 2:26 pm

@daffy : sbnernya sih itu sudah diupload (kalo yg dari hardisk kita), tapi ditaruh di temporary folder

@vinzz : coba kunjungi http://www.ehow.com/how_6880594_upload-big-files-php.html
raditya 27/02/2011 at 9:39 pm

mas itu download file source code nya kok gak bisa
apa files nya udah di hapus ta????????

tolong link donlot filnya mas

thanx
anggie 28/02/2011 at 9:03 pm

Wah maaf mas…rupanya sudah kehapus filenya…maaf, copas aja ya dari artikel ini…
dans 28/04/2011 at 11:41 am

mas. map mo tanya klo menampilkan file pdf gmana ya???mhon pencerahannya..
kirim via email ya,,mkasih.
anggie 30/04/2011 at 7:54 pm

@dans : biasanya saya bukan ditampilkan…model didownload aja
bung 02/06/2011 at 8:59 am

mas .. mw tanya nih .. kok script yg ini tak pake di CI 2.0 gk bisa y ??? ad apakah mohon pencerahannya ???
anggie 02/06/2011 at 9:03 am

@bung : Saya belum mencoba CI 2.0. Namun, jika diterapkan sesuai environtment di CI 2.0, saya rasa tidak akan ada masalah…
David Sri 05/06/2011 at 12:35 pm

Wah keren, dari kemaren saya cari2 baru nemu sekrang nih caranya.. thanks pak , saya coba dulu
Ajax upload using codeigniter « Kovloq 23/10/2011 at 11:28 pm

[...] here and [...]
newbie 21/12/2011 at 2:09 pm

mas mau tanya nih,,

css nya buat sendiri ya ??
newbie2 22/12/2011 at 9:34 am

mas script ‘secureuri’ maksudnya apa?

Ajax File Upload (CodeIgniter dan JQuery)

Related posts:

43 Comments

Leave a comment

Blog Categories

Recent Posts

Recent Comments

Pages

Blogroll

Archives

Meta