Tutorial jQuery : Upload Gambar via AJAX Dengan PHP dan jQuery

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.

	method="post" enctype="multipart/form-data" target="media-upload"onsubmit="uploadGambar();" action="upload.php">
	Pilih Gambar : type="file" /> name="upload" value="Upload Gambar" />

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

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.

	$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)
	{

	?>

	}

	else
	{

	?>

	}

?>

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.