Pada script Anda sebenarnya sudah hampir benar. Yang perlu ditambahkan adalah:
- Preview foto harus memiliki
id. - Saat file dipilih, tampilkan preview.
- Upload otomatis menggunakan AJAX.
- Simpan path gambar ke database.
- Tidak perlu tombol upload.
1. Ubah bagian foto menjadi:
<div class="profile-wrapper">
<img src="<?=$row['gambar'];?>"
id="preview"
class="profile-photo">
<button type="button"
class="camera-btn"
onclick="document.getElementById('foto').click()">
<i class="bi bi-camera-fill"></i>
</button>
<input type="file"
id="foto"
name="foto"
accept="image/*"
style="display:none;">
<input type="hidden"
id="id_siswa"
value="<?=$idSiswa;?>">
</div>
<div id="uploadStatus"
class="small mt-2 text-secondary">
</div>
2. Tambahkan script sebelum </body>
<script>
$('#foto').on('change', function(){
let file = this.files[0];
if(!file){
return;
}
/*
|--------------------------------------------------------------------------
| Preview Langsung
|--------------------------------------------------------------------------
*/
let previewUrl = URL.createObjectURL(file);
$('#preview').attr('src', previewUrl);
$('#uploadStatus').html(
'<span class="text-primary">Mengupload foto...</span>'
);
/*
|--------------------------------------------------------------------------
| Upload Otomatis
|--------------------------------------------------------------------------
*/
let formData = new FormData();
formData.append('foto', file);
formData.append(
'id_siswa',
$('#id_siswa').val()
);
$.ajax({
url:'upload_foto_siswa.php',
type:'POST',
data:formData,
contentType:false,
processData:false,
success:function(res){
try{
let data = JSON.parse(res);
if(data.success){
$('#preview').attr(
'src',
data.url + '?t=' + Date.now()
);
$('#uploadStatus').html(
'<span class="text-success">✓ Foto berhasil diperbarui</span>'
);
}else{
$('#uploadStatus').html(
'<span class="text-danger">Upload gagal</span>'
);
}
}catch(e){
$('#uploadStatus').html(
'<span class="text-danger">Terjadi kesalahan</span>'
);
}
}
});
});
</script>
3. Buat file upload_foto_siswa.php
<?php
include "koneksi.php";
$response = [
'success' => false
];
if(
isset($_FILES['foto']) &&
isset($_POST['id_siswa'])
){
$id_siswa = $_POST['id_siswa'];
$folder = "uploads/siswa/";
if(!is_dir($folder)){
mkdir($folder,0777,true);
}
$ext = strtolower(
pathinfo(
$_FILES['foto']['name'],
PATHINFO_EXTENSION
)
);
$namaFile =
"siswa_" .
$id_siswa .
"_" .
time() .
"." .
$ext;
$path = $folder . $namaFile;
if(
move_uploaded_file(
$_FILES['foto']['tmp_name'],
$path
)
){
mysqli_query(
$conn,
"UPDATE tbl_siswa
SET gambar='$path'
WHERE id='$id_siswa'"
);
$response['success'] = true;
$response['url'] = $path;
}
}
echo json_encode($response);
Bonus (lebih elegan)
Tambahkan CSS berikut:
.camera-btn{
position:absolute;
right:5px;
bottom:5px;
width:42px;
height:42px;
border:none;
border-radius:50%;
background:#0d6efd;
color:#fff;
box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.profile-wrapper{
position:relative;
width:140px;
margin:auto;
}
Hasilnya akan seperti WhatsApp/Instagram:
- Klik ikon kamera 📷
- Pilih foto
- Preview langsung berubah
- Upload otomatis ke server
- Database
tbl_siswa.gambarlangsung terupdate - Tidak ada tombol upload lagi.
Juni 07, 2026



0 komentar:
Posting Komentar