Merhaba, İşletmem için geliştirdiğim bir depo yönetimi yazılımı için yardımcı araç olarak geliştirdiğim hızlı resim yükleme yazılımının ilk halini ücretsiz paylaşıyorum. Çok basit ve gelişime açık index.php kodları :
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0755, true);
}
$response = [];
foreach ($_FILES['image']['name'] as $key => $fileName) {
$uniqueId = uniqid();
$fileExtension = pathinfo($fileName, PATHINFO_EXTENSION);
$shortFileName = $uniqueId . '.' . $fileExtension;
$targetFile = $uploadDir . $shortFileName;
$imageFileType = strtolower($fileExtension);
$allowedTypes = ['jpg', 'jpeg', 'png', 'gif'];
if (!in_array($imageFileType, $allowedTypes)) {
$response[] = ['success' => false, 'message' => 'Sadece JPG, JPEG, PNG ve GIF dosyaları yüklenebilir.'];
continue;
}
if ($_FILES['image']['size'][$key] > 5 * 1024 * 1024) {
$response[] = ['success' => false, 'message' => 'Dosya boyutu 5MB\'yi aşamaz.'];
continue;
}
if (move_uploaded_file($_FILES['image']['tmp_name'][$key], $targetFile)) {
file_put_contents($targetFile . '.time', time());
$shortUrl = 'http://' . $_SERVER['HTTP_HOST'] . '/uploads/' . $shortFileName;
$response[] = [
'success' => true,
'url' => $shortUrl,
'preview' => $shortUrl
];
} else {
$response[] = ['success' => false, 'message' => 'Resim yüklenirken bir hata oluştu.'];
}
}
echo json_encode($response);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CorexDepo | Hızlı Resim Yükle</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #6e7dff, #1c92d2);
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 700px;
margin: auto;
background: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.progress-container {
display: none;
margin-top: 20px;
}
.progress {
height: 25px;
border-radius: 12px;
overflow: hidden;
}
.progress-bar {
transition: width 0.4s ease-in-out;
}
.image-preview-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
}
.image-item {
text-align: center;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
background: #f9f9f9;
margin-bottom: 20px;
}
.image-item img {
max-width: 100%;
border-radius: 8px;
margin-bottom: 10px;
}
.copy-btn {
background: #0d6efd;
color: #fff;
border: none;
padding: 8px 12px;
cursor: pointer;
border-radius: 4px;
font-size: 0.9rem;
transition: background-color 0.3s;
}
.copy-btn:hover {
background: #0b5ed7;
}
</style>
</head>
<body>
<div class="container">
<h1>Hızlı Resim Yükleme</h1>
<form id="uploadForm" enctype="multipart/form-data" class="mb-4">
<div class="mb-3">
<label for="image" class="form-label">Resim Seçin (En Fazla 7 Adet):</label>
<input type="file" name="image[]" id="image" class="form-control" multiple required>
</div>
<button type="submit" class="btn btn-primary w-100">Yükle</button>
</form>
<div class="progress-container">
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-center mt-2" id="loadingText">Yükleme Başladı...</p>
</div>
<div class="image-preview-container" id="previewContainer"></div>
</div>
<script>
const uploadForm = document.getElementById('uploadForm');
const progressContainer = document.querySelector('.progress-container');
const progressBar = document.querySelector('.progress-bar');
const loadingText = document.getElementById('loadingText');
const previewContainer = document.getElementById('previewContainer');
const imageInput = document.getElementById('image');
uploadForm.addEventListener('submit', async (e) => {
e.preventDefault();
if (imageInput.files.length > 7) {
alert('En fazla 7 dosya yükleyebilirsiniz.');
return;
}
const formData = new FormData(uploadForm);
progressContainer.style.display = 'block';
progressBar.style.width = '0%';
loadingText.textContent = 'Yükleme Başladı...';
const xhr = new XMLHttpRequest();
xhr.open('POST', '', true);
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const percentComplete = Math.round((event.loaded / event.total) * 100);
progressBar.style.width = `${percentComplete}%`;
loadingText.textContent = `Yükleniyor: %${percentComplete}`;
}
};
xhr.onload = () => {
if (xhr.status === 200) {
const result = JSON.parse(xhr.responseText);
previewContainer.innerHTML = '';
result.forEach(file => {
const imageItem = document.createElement('div');
imageItem.classList.add('image-item');
if (file.success) {
imageItem.innerHTML = `
<img src="${file.preview}" alt="Önizleme">
<input type="text" value="${file.url}" class="form-control mb-2" readonly>
<button class="copy-btn" onclick="copyToClipboard('${file.url}')">Linki Kopyala</button>
`;
} else {
imageItem.textContent = file.message;
}
previewContainer.appendChild(imageItem);
});
loadingText.textContent = 'Yükleme Tamamlandı!';
} else {
loadingText.textContent = 'Sunucu Hatası.';
}
};
xhr.onerror = () => {
loadingText.textContent = 'Yükleme Başarısız.';
};
xhr.send(formData);
});
function copyToClipboard(url) {
navigator.clipboard.writeText(url).then(() => alert('Link kopyalandı!'));
}
</script>
</body>
</html>