Kita sering menjumpai dalam sebuah web form di website terdapat beberapa field input untuk upload gambar.
Misalnya sebuah form registrasi yang mengharuskan user yang mendaftar untuk mengupload scan ID card dan bukti transfer, scan beberapa dokumen, dan sebagainya.
Pada kesempatan ini saya membuat contoh form php dengan 2 input upload image. Namun dalam contoh ini, saya tidak membuatnya langsung dalam sekali submit, tapi dilakukan dengan beberapa kali submit sehingga proses upload image tidak sekaligus, melainkan satu persatu.
Tujuan memproses upload image satu persatu adalah untuk meminimalkan kegagalan proses upload image, karena jika upload beberapa image sekaligus kegagalan bisa saja terjadi, apalagi jika gambar nya besar-besar sedangkan koneksi internet terbatas.
Dalam contoh form ini data text dalam field input form disimpan terlebih dahulu ke dalam database, kemudian image nya diupload satu persatu ke server setelah data text tersimpan. Alamat path folder tempat menyimpan image dimasukan juga ke dalam database dengan cara mengupdate row table database mysql yang berisi data text yang sudah disimpan sebelumnya. paham kan alurnya?
Dalam contoh form php ini, ada 3 field input yaitu nama, alamat, nomer HP , dan dua field upload image yang akan ditampilkan setelah user mengisi data dan klik submit 3 field terlebih dahulu.
Tampilan halaman form seperti di bawah ini:
code untuk form HTML di atas kurang lebih seperti ini:
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <body> <center> <h3>Formulir Registrasi</h3><br/> <div class="alert alert-success" role=alert> <strong>Semua Form harus diisi</strong><br/>persiapkan scan KTP dan Bukti Transfer pembayaraan<br/> Scan image akan diupload satu persatu setelah klik tombol submit<br/> <br/></center> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <form action="post.php" method="post" name="form1" id="form1"> <div class="form-group"> <label >Nama Lengkap</label> <input type="text" class="form-control" name="nama"> </div> <div class="form-group"> <label>Alamat Lengkap</label> <input type="text" class="form-control" name="alamat"> </div> <div class="form-group"> <label>No. HP</label> <input type="text" class="form-control" name="hp"> </div> <div class="form-group"> <input type="submit" name="Submit" value="submit" /> </div> </form> </div> <div class="col-md-4"></div> </div> </body> </html>
Setelah user mengisi form, dan klik submit, maka data yang dimasukkan ke dalam field input form yaitu Nama lengkap, Alamat lengkap dan Nomer HP diproses di halaman post.php dengan menyimpannya ke dalam database Mysql.. jika proses penyimpanan berhasil, maka kemudian dimunculkan field input upload image. User dipersilahkan mengupload scan KTP.
Tampilan halaman post.php seperti ini:
Data yang telah disimpan ditampilkan di halaman post.php , selanjutnya user dipersilahkan upload scan KTP. untuk code php halaman post.php seperti ini:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<?php
include "koneksi.php";
//Menangkap data yang dipost oleh user
$nama = $_POST['nama'] ;
$alamat = $_POST['alamat'] ;
$hp = $_POST['hp'] ;
//Menyimpan data ke dalam database Mysql
$query_insert = "INSERT INTO datareg (nama,alamat,hp) VALUES ('$nama','$alamat','$hp')";
$insert = mysql_query($query_insert);
//Menampilkan konfirmasi proses penyimpanan
if($insert)
{
// Jika berhasil disimpan, dimunculkan data yang berhasil disimpan
echo "<br/><center><h3><span class='label label-success'>berhasil disimpan... </span></h3><br/><br/>";
echo"
<table class='table'>
<tr>
<td>Nama</td><td>$nama</td>
</tr>
<tr>
<td>alamat</td><td>$alamat</td>
</tr>
<tr>
<td>Nomer HP</td><td>$hp</td>
</tr>
</table>
<br/><br/>";
//User dipersilahkan upload scan KTP
echo"
Silahkan upload image Scan KTP anda<br/><br/>
<form action='bukti-transfer.php' method='post' enctype='multipart/form-data' name='FormUpload' id='FormUpload'>
<input type='hidden' class='form-control' name='nama' value='$nama'>
<input type='hidden' class='form-control' name='hp' value='$hp'>
<input type='hidden' class='form-control' name='alamat' value='$alamat'>
<p>Pilih File Gambar : <br/><input type='file' name='filektp' id='Filegambar'></p>
<p><input type='submit' name='button' id='button' value='Upload '></p>
</form>";
}
//Jika data gagal disimpan, tampilkan pesan gagal penyimpanan
else
{
echo "Data GAGAL disimpan... ";
}
?>
</div>
</div>
</body>
</html>
Coba perhatikan, dalam form upload image scan KTP, ada field input type hidden yang berisi nama, alamat dan nomer HP yang otomatis terisi dengan data sebelumnya.
<input type='hidden' class='form-control' name='nama' value='$nama'> <input type='hidden' class='form-control' name='hp' value='$hp'> <input type='hidden' class='form-control' name='alamat' value='$alamat'>
Nama dan nomer HP ini ikut di post kan lagi supaya nantinya tidak tertukar saat update data scan KTP pada row table database. Selain itu, datanya input yang user masukan juga akan ditampilkan pada halaman selanjutnya, sebagai konfirmasi penyimpanan data berhasil.
Setelah user memilih scan ktp dan klik tombol upload, image akan diupload di halaman bukti-transfer.php
akan ditampilkan konfirmasi berhasil disimpan. seperti gambar di bawah ini:
Code PHP untuk halaman bukti transfer, sebagai berikut:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<?php
include"koneksi.php";
$nama = $_POST['nama'] ;
$hp = $_POST['hp'] ;
$alamat = $_POST['alamat'] ;
$namafolder="gambar/"; //folder tempat menyimpan file
if (!empty($_FILES["filektp"]["tmp_name"]))
{
$jenis_gambar=$_FILES['filektp']['type']; //memeriksa format gambar scan KTP
if($jenis_gambar=="image/jpeg" || $jenis_gambar=="image/jpg" || $jenis_gambar=="image/gif" || $jenis_gambar=="image/x-png")
{
$gambarktp = $namafolder . basename($_FILES['filektp']['name']);
//mengupload gambar scan ktp dan update row table database dengan path folder dan nama image
if (move_uploaded_file($_FILES['filektp']['tmp_name'], $gambarktp)) {
$query_update = "update datareg set ktp='$gambarktp' where nama='$nama' and hp='$hp'";
$update = mysql_query($query_update);
// jika berhasil disimpan, ditampilkan data dan thumbnail image scan ktp yang diupload
echo"
<br/><center><h3><span class='label label-success'>berhasil disimpan... </span></h3><br/><br/>
<table class='table'>
<tr>
<td>Nama</td><td>$nama</td>
</tr>
<tr>
<td>alamat</td><td>$alamat</td>
</tr>
<tr>
<td>Nomer HP</td><td>$hp</td>
</tr>
<tr>
<td>KTP</td><td><img src='$gambarktp' width='80'></td>
</tr>
</table>
<center>
Upload Bukti Transfer<br/><br/>
<form action='hasil-submit.php' method='post' enctype='multipart/form-data' name='FormUpload' id='FormUpload'>
<input type='hidden' class='form-control' name='nama' value='$nama'>
<input type='hidden' class='form-control' name='hp' value='$hp'>
<input type='hidden' class='form-control' name='alamat' value='$alamat'>
<input type='hidden' class='form-control' name='gambarktp' value='$gambarktp'>
<p>Pilih File Gambar : <input type='file' name='filetransfer' id='filetransfer'></p>
<p><input type='submit' name='button' id='button' value='Upload'></p>
</form></center>";
//Jika gagal upload, tampilkan pesan Gagal
} else {
echo "Gambar gagal dikirim";
}
} else {
echo "Jenis gambar yang anda kirim salah. Harus .jpg .gif .png";
}
} else {
echo "Anda belum memilih gambar";
}
?>
</div>
</div>
</body>
</html>
Setelah user klik submit gambar bukti transfer, proses upload dilakukan di halaman hasil-submit.php
Code nya sebagai berikut:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<?php
include"koneksi.php";
$nama = $_POST['nama'] ;
$hp = $_POST['hp'] ;
$alamat = $_POST['alamat'] ;
$gambarktp = $_POST['gambarktp'] ;
$namafolder="gambar/"; //folder tempat menyimpan file
if (!empty($_FILES["filetransfer"]["tmp_name"]))
{
$jenis_gambar=$_FILES['filetransfer']['type'];//memeriksa format gambar bukti transfer
if($jenis_gambar=="image/jpeg" || $jenis_gambar=="image/jpg" || $jenis_gambar=="image/gif" || $jenis_gambar=="image/x-png")
{
$gambartransfer = $namafolder . basename($_FILES['filetransfer']['name']);
//mengupload gambar bukti transfer dan update row table database dengan path folder dan nama image
if (move_uploaded_file($_FILES['filetransfer']['tmp_name'], $gambartransfer)) {
$query_update = "update datareg set transfer='$gambartransfer' where nama='$nama' and hp='$hp'";
$update = mysql_query($query_update);
// jika berhasil disimpan, ditampilkan data dan thumbnail image scan ktp, dan bukti transfer yang diupload
echo"
<br/><center><h3><span class='label label-success'>berhasil disimpan... </span></h3><br/><br/>
<table class='table'>
<tr>
<td>Nama</td><td>$nama</td>
</tr>
<tr>
<td>alamat</td><td>$alamat</td>
</tr>
<tr>
<td>Nomer HP</td><td>$hp</td>
</tr>
<tr>
<td>KTP</td><td><img src='$gambarktp' width='80'></td>
</tr>
<tr>
<td>Bukti Transfer</td><td><img src='$gambartransfer' width='80'></td>
</tr>
</table>
";
//Jika gagal upload, tampilkan pesan Gagal
} else {
echo "Gambar gagal dikirim";
}
} else {
echo "Jenis gambar yang anda kirim salah. Harus .jpg .gif .png";
}
} else {
echo "Anda belum memilih gambar";
}
?>
</div>
</div>
</body>
</html>
sedangkan tampilan halaman bukti-transfer seperti di bawah ini:
Sedangkan untuk data dari hasil input data dan upload dari para user, dapat dilihat di halaman hasil.php , dengan tampilan seperti di bawah ini :
sedangkan code php untuk halaman hasil.php seperti di bawah ini:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class='panel panel-default'>
<div class='panel-heading'>DATA REGISTRASI</div>
<div class='panel-body'>
</div>
<table class='table'>
<tr><td><b>Nama</b></td><td><b>Alamat</b></td><td><b>HP</b></td><td><b>KTP</b></td><td><b>Bukti Transfer</b></td></tr>
<?php
include "koneksi.php";
$data = "SELECT * from datareg";
$bacadata = mysql_query($data);
while($select_result = mysql_fetch_array($bacadata))
{
$nama = $select_result['nama'];
$alamat = $select_result['alamat'];
$hp = $select_result['hp'];
$ktp = $select_result['ktp'];
$transfer = $select_result['transfer'];
echo"
<tr>
<td>$nama</td><td>$alamat</td><td>$hp</td>
<td><a href='$ktp' target='_blank'><img src='$ktp' width='80'></a></td>
<td><a href='$transfer' target='_blank'><img src='$transfer' width='80'></a></td>
</tr>
";
}?>
</table>
</div>
Download script form php dengan 2 field upload image
password zip : www.bayuajie.com
Pingback: Cara membuat script php upload multiple file sekaligus – Corat Coret
knp data tdk d temukan
data gagal di simpan