Juni 07, 2026
Berikut contoh lengkap menggunakan Bootstrap 5 + PHP, dimana:
✅ Klik foto profil
✅ Pilih gambar dari galeri
✅ Preview langsung berubah
✅ File langsung terupload otomatis
✅ Tidak perlu tombol Upload
✅ Mobile Friendly
1. index.php
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload Foto Profil</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<style>
body{
background:#f5f7fb;
}
.profile-container{
max-width:400px;
margin:50px auto;
}
.profile-card{
background:white;
border-radius:20px;
padding:30px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}
.profile-wrapper{
position:relative;
width:150px;
margin:auto;
}
.profile-image{
width:150px;
height:150px;
border-radius:50%;
object-fit:cover;
border:4px solid #fff;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}
.camera-btn{
position:absolute;
right:0;
bottom:5px;
width:45px;
height:45px;
border:none;
border-radius:50%;
background:#0d6efd;
color:white;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.upload-status{
margin-top:15px;
font-size:14px;
}
</style>
</head>
<body>
<div class="container">
<div class="profile-container">
<div class="profile-card">
<h3 class="mb-4">
Foto Profil
</h3>
<div class="profile-wrapper">
<img
id="preview"
src="uploads/default.png"
class="profile-image">
<button
class="camera-btn"
onclick="pilihFoto()">
<i class="bi bi-camera-fill"></i>
</button>
</div>
<h4 class="mt-4">
Evander
</h4>
<p class="text-muted">
Bimbel SMP
</p>
<div
id="status"
class="upload-status text-secondary">
Klik ikon kamera untuk mengganti foto
</div>
</div>
</div>
</div>
<input
type="file"
id="foto"
accept="image/*"
hidden>
<script>
function pilihFoto()
{
document.getElementById('foto').click();
}
document
.getElementById('foto')
.addEventListener('change', function(){
let file = this.files[0];
if(!file)
{
return;
}
// Preview langsung
let previewUrl = URL.createObjectURL(file);
document
.getElementById('preview')
.src = previewUrl;
document
.getElementById('status')
.innerHTML = 'Mengupload foto...';
// Upload otomatis
let formData = new FormData();
formData.append('foto', file);
fetch('upload.php', {
method:'POST',
body:formData
})
.then(response => response.json())
.then(data => {
if(data.success)
{
document
.getElementById('status')
.innerHTML =
'<span class="text-success">✓ Foto berhasil diupload</span>';
document
.getElementById('preview')
.src =
data.url + '?v=' + Date.now();
}
else
{
document
.getElementById('status')
.innerHTML =
'<span class="text-danger">Upload gagal</span>';
}
})
.catch(error => {
document
.getElementById('status')
.innerHTML =
'<span class="text-danger">Terjadi kesalahan</span>';
});
});
</script>
</body>
</html>
2. upload.php
<?php
header('Content-Type: application/json');
$response = [
'success' => false
];
if(isset($_FILES['foto']))
{
$folder = 'uploads/';
if(!is_dir($folder))
{
mkdir($folder, 0777, true);
}
$ext = pathinfo(
$_FILES['foto']['name'],
PATHINFO_EXTENSION
);
$namaFile =
'foto_' .
time() .
'.' .
$ext;
$tujuan = $folder . $namaFile;
if(
move_uploaded_file(
$_FILES['foto']['tmp_name'],
$tujuan
)
)
{
$response['success'] = true;
$response['url'] = $tujuan;
}
}
echo json_encode($response);
Struktur Folder
project/
│
├── index.php
├── upload.php
│
└── uploads/
└── default.png
Jika Ingin Langsung Membuka Kamera HP
Ganti:
<input
type="file"
id="foto"
accept="image/*"
hidden>
menjadi:
<input
type="file"
id="foto"
accept="image/*"
capture="user"
hidden>
Maka pada sebagian besar smartphone Android:
📷 Klik ikon kamera → Kamera depan langsung terbuka → Ambil foto → Upload otomatis → Preview berubah otomatis.
Ini adalah pola yang mirip dengan aplikasi WhatsApp dan Instagram saat mengganti foto profil.
0 komentar:
Posting Komentar