html #285
Description
<title>QR Kodlu Fotoğraf Yükleme</title>
<style>
body { font-family: Arial; background:#f2f2f2; padding:20px }
.box { background:#fff; padding:20px; max-width:520px; margin:auto; border-radius:8px }
input, button { width:100%; padding:10px; margin-top:10px }
button { background:#007bff; color:#fff; border:none; border-radius:5px }
<script>
const CLOUD_NAME = "BURAYA_CLOUD_NAME_YAZ";
const UPLOAD_PRESET = "BURAYA_PRESET_ADI_YAZ";
function upload() {
const name = document.getElementById("name").value.trim();
const file = document.getElementById("photo").files[0];
const msg = document.getElementById("msg");
if (!name || !file) {
msg.innerText = "İsim ve fotoğraf zorunlu.";
return;
}
if (file.size > 20 * 1024 * 1024) {
msg.innerText = "Fotoğraf 20 MB'dan büyük olamaz.";
return;
}
const formData = new FormData();
formData.append("file", file);
formData.append("upload_preset", UPLOAD_PRESET);
formData.append("context", `name=${name}`);
fetch(`https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`, {
method: "POST",
body: formData
})
.then(() => {
msg.innerText = "✅ Yüklendi!";
loadGallery();
})
.catch(() => msg.innerText = "❌ Hata oluştu.");
}
function loadGallery() {
fetch(`https://res.cloudinary.com/${CLOUD_NAME}/image/list/default.json`)
.then(res => res.json())
.then(data => {
const gallery = document.getElementById("gallery");
gallery.innerHTML = "";
data.resources.reverse().forEach(img => {
const wrapper = document.createElement("div");
wrapper.className = "item";
const image = document.createElement("img");
image.src = `https://res.cloudinary.com/${CLOUD_NAME}/image/upload/w_400/${img.public_id}`;
const nameDiv = document.createElement("div");
nameDiv.className = "name";
nameDiv.innerText = img.context?.custom?.name || "İsimsiz";
wrapper.appendChild(image);
wrapper.appendChild(nameDiv);
gallery.appendChild(wrapper);
});
});
}
loadGallery();
</script>
.gallery {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:12px;
margin-top:30px;
}
.item {
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.item img {
width:100%;
display:block;
}
.name {
padding:6px;
font-size:14px;
text-align:center;
background:#fafafa;
}
</style>