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.
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.
