Membuat Sistem Upload Gambar dan Menampilkan Gambar Hasil Upload Dengan PHP

Selamat Datang! Browser HP Anda Mozilla/5.0 ---------------------------------------

2026-05-06

Membuat Sistem Upload Gambar dan Menampilkan Gambar Hasil Upload Dengan PHP

Membuat form upload dengan kode PHP sebenarnya tak terlalu sulit. Kita hanya perlu menghayati saja makna dari kode tersebut. Karena program php berbeda dengan program html. Seperti contoh gambar diatas, adalah salah satu dari sekian gambar yang saya upload dengan program php ini...

Untuk kali ini saya akan membagikan cara-cara mudah untuk membuat form upload gambar dengan PHP. Kali ini saya akan membuatnya via penyimpanan folder (tanpa menggunakan database), jadi tak perlu susah payah untuk menyiapkan database.

Oke, langsung saja berikut ini bahan-bahan nya :

Berikut ini langkah-langkah nya :

Pertama, buat folder latihan dengan nama upload-gambar di htdocs (ini untuk menyimpan file-file diatas). Lalu buat file di folder upload-gambar dengan nama index.php seperti diatas. tuliskan source kodenya seperti berikut :
index.php
<?php include('action_upload.php');?><form method="post" enctype="multipart/form-data" action=""><table class="table" cellpadding="0" cellspacing="0" align="center"><tr> <td colspan="2" height="25" class="title">Form Upload File</td></tr><tr><td width="100">File</td><td><input type="file" name="data_upload" /></td></tr><tr><td width="100" valign="top">Keterangan</td> <td><input name="keterangan" type="text" value="Keterangan file"></td></tr><tr><td></td> <td><input type="submit" name="btnUpload" value="Unggah !" /></td></tr></table></form>

Perhatikan kode php i n c l u d e ( ' a c t i o n _ u p l o a d . p h p ' ) ; diatas. Kode tersebut berperan untuk memanggil file action_upload.php yang nantinya akan ditampilkan melalui kode tersebut.

Lalu buat lagi file dengan nama action_upload.php. Source kodenya sebagai berikut :
action_upload.php
<?php //Buat konfigurasi upload// Folder tujuan upload file $eror = false; $folder = "upload/"; //type file yang bisa diupload $file_type = array('jpg','jpeg','png','gif','bmp'); //tukuran maximum file yang dapat diupload $max_size = 100000000; //10MB if(isset($_POST['btnUpload'])){ //Mulai mendeteksi data $file_name = $_FILES['data_upload']['name']; $file_size = $_FILES['data_upload']['size']; //cari extensi file dengan menggunakan fungsi explode $explode = explode('.',$file_name); $extensi = $explode[count($explode)-1]; //check apakah type file sudah sesuai if(!in_array($extensi,$file_type)){ $eror = true; $pesan .= 'Tipe file yang anda upload tidak sesuai, harus jpg, jpeg, png, gif, dan bmp !<br />'; } if($file_size > $max_size){ $eror = true; $pesan .= ' Ukuran file melebihi batas maksimal !<br />'; } //check ukuran file apakah sudah sesuai if($eror == true){ echo '<div id="eror">'.$pesan.'</div>'; } else{ //mulai memproses upload file if(move_uploaded_file($_FILES['data_upload']['tmp_name'], $folder.$file_name)){ echo '<div id="msg">Berhasil meng-unggah file '.$file_name.' !</div>'; } else{ echo " Gagal meng-unggah file '.$file_name.' !"; } }}?><br><img src="upload/<? echo $file_name;?>" />

Perhatikan kode < i m g s r c = " u p l o a d / < ? e c h o $ f i l e _ n a m e ; ? > " / > diatas. Kode ini berfungsi untuk menampilkan gambar hasil upload dari kode variable $ f i l e_n a m e yang akan menerima data berupa nama gambar yang diupload. Data tersebut kemudian akan ditampung dan disimpan di direktori upload/ seperti kode diatas. Dengan begitu, anda harus membuat folder bernama upload yang akan menyimpan file gambar tadi.

Inilah hasil dari form upload diatas :

Seharusnya jika berhasil meng-upload gambar, akan tampil alert seperti dibawah ini, dan secara otomatis gambar akan ditampilkan.

Lalu gambar tersebut akan tersimpan di folder upload seperti ini :

Oke, sampai disini anda sudah berhasil membuat form upload gambar dan menampilkan gambar hasil upload. Untuk full kodenya bisa didownload Disini.

Widget Button Admin :

<script languange="JAVASCRIPT" src="http://danny-boyz.xtgem.com/js/danny-boyz.js"></script>

Bagikan Blog Ini

Membuat Sistem Upload Gambar dan Menampilkan Gambar Hasil Upload Dengan PHP

Widget Button Admin :

Generator Wap Service

Generator Gambar

Generator Teks

Generator Widget

Upload File

Generator Tools

Script