Tutorial jQuery : Upload Gambar via AJAX Dengan PHP dan jQuery

Postingan saya kali ini ditemani dengan koneksi modem yang sangat-sangat memprihatinkan, entah karena provider atau modemnya yang sudah minta diganti. Walaupun harus diganti, mungkin butuh waktu karena sekarang saya memang sedang bokek gara-gara semua uang di ATM sudah saya alokasikan untuk si laptop baru. Nah, kali ini saya akan membagikan sedikit tutorial sederhana tentang tutorial upload gambar via AJAX dengan PHP dan jQuery. Terinspirasi dari fitur Change Profile Picture milik Facebook, dimana ketika user selesai melakukan upload gambar, maka gambar yang di-upload akan muncul. Tapi yang akan saya jelaskan disini masih sangat sederhana, belum terdapat fitur untuk resize gambar dan menyimpannya ke dalam database. Berikut tutorialnya, cekidot gan.

1. Disini saya menggunakan  file, yaitu file yang berisi form untuk upload gambar dan file yang berisi proses untuk memindahkan gambar ke folder yang telah kita tentukan. Siapkan form-nya terlebih dahulu.

<form name="frm" method="post" enctype="multipart/form-data" target="media-upload" onsubmit="uploadGambar();" action="upload.php">
Pilih Gambar : <input name="gambar" type="file" /><input type="submit" name="upload" value="Upload Gambar" />
</form>
<div id="tampil-gambar"></div>
<iframe name="media-upload" id="media-upload" style="display:none;"></iframe>

2. Kita lanjutkan dengan membuat 2 function javascript yang memanfaatkan api() dari jQuery untuk proses upload gambar via AJAX.

<script type="text/javascript" src="jquery.min.js"></script>
<script>
function uploadGambar(){
	$("#tampil-gambar").html("<img src='loading.gif'> Gambar sedang di-upload...");
}
function tampilkanGambar(alamat){
	var gbr = new Image();
	$(gbr).load(function(){
		$(this).hide();
		$("#tampil-gambar").html($(this));
		$(this).fadeIn();
	}).attr('src', alamat)
	.error(function(){
		alert("Tidak berhasil mengambil gambar");
	});
}
</script>

3. Langkah yang terakhir, buat sebuah file .php yang berisi script untuk meng-upload gambar ke direktori yang sudah kita tentukan. Pada file ini, juga bisa ditambahkan validasi dan script untuk resize gambar agar tidak terlalu memenuhi space hosting.

<?php
$nama_file = $_FILES['gambar']['name'];
$status = FALSE;
	if(!empty($_FILES['gambar']['tmp_name']))
	{
		$upload = move_uploaded_file($_FILES['gambar']['tmp_name'], 'gambar/'.$nama_file);
		if($upload)
		{
			$status = TRUE;
		}
	}

if($status==TRUE)
{
	?>
	<script>
		parent.tampilkanGambar('gambar/<?php echo $nama_file; ?>');
	</script>
	<?php
}
else
{
	?>
	<script>
		alert('Tidak berhasil melakukan upload');
	</script>
	<?php
}
?>

4. Gambar yang telah selesai di-upload, dipanggil dengan function parent.tampilkanGambar(url_gambar) yang telah kita buat tadi. Saya tambahkan parent, agar gambar bisa ditampilkan pada 1 halaman dengan form.

Berhubungan dengan masalah keamanan, untuk kali ini demo file-nya tidak saya upload :D, tapi contoh source kode jadinya masih bisa di download. OK deh, sekian dulu tutorial saya kali ini. Semoga bisa dikembangkan ke arah yang lebih baik dan tentunya bisa bermanfaat untuk rekan-rekan.

Happy Blogging and Keep Coding

Cheerrrss….!!!!