Fotoğraflar seçilir
Ana fotoğraf belirlenir
Form verileri doldurulmuştur
Fotoğraflar sırayla gönderilir ve son fotoğrafa gelindiğinde form verileri de gönderilir.
Son fotoğraf yüklendikten sonra örnek yanıt:
{
"success": true,
"message": "T\u00fcm dosyalar ba\u015far\u0131yla y\u00fcklendi.",
"files": [
"uploads\/66e70b79ac171_53.jpg",
"uploads\/66e70c470c18a_54.jpg",
"uploads\/66e70c47b8c80_52.jpg",
"uploads\/66e70c48d4756_43.jpg"
],
"mainPhoto": "uploads\/66e70c470c18a_54.jpg",
"formData": {
"title": "fdsdfdsffd",
"description": "sdfsdfsdsdfdsf"
},
"errors": []
}
Aşağıda html ve php kodlar mevcut.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Toplu Fotoğraf Yükleme</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">
<style>
.dropzone { border: 2px dashed #0087F7; border-radius: 5px; padding: 20px; margin-bottom: 20px; }
.main-photo { border: 3px solid green; }
#additionalForm { margin-bottom: 20px; }
</style>
</head>
<body>
<form id="additionalForm">
<input type="text" name="title" placeholder="Başlık">
<textarea name="description" placeholder="Açıklama"></textarea>
<!-- Diğer form alanları buraya eklenebilir -->
</form>
<div id="myDropzone" class="dropzone"></div>
<button id="uploadButton">Fotoğrafları Yükle</button>
<script>
Dropzone.autoDiscover = false;
let mainPhotoFile = null;
let totalFiles = 0;
let uploadedFiles = 0;
const myDropzone = new Dropzone("#myDropzone", {
url: "upload.php",
autoProcessQueue: false,
addRemoveLinks: true,
parallelUploads: 10,
});
myDropzone.on("addedfile", function(file) {
totalFiles++;
console.log("Dosya eklendi. Toplam dosya sayısı: " + totalFiles);
// Ana fotoğraf seçim butonu
const button = Dropzone.createElement("<button class='select-main'>Ana Fotoğraf Yap</button>");
file.previewElement.appendChild(button);
button.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
if (mainPhotoFile) {
mainPhotoFile.previewElement.classList.remove("main-photo");
}
file.previewElement.classList.add("main-photo");
mainPhotoFile = file;
console.log("Ana fotoğraf seçildi:", file.name);
});
});
myDropzone.on("removedfile", function(file) {
totalFiles--;
console.log("Dosya kaldırıldı. Toplam dosya sayısı: " + totalFiles);
if (file === mainPhotoFile) {
mainPhotoFile = null;
console.log("Ana fotoğraf kaldırıldı");
}
});
document.getElementById("uploadButton").addEventListener("click", function() {
console.log("Yükleme başlatılıyor. Toplam dosya sayısı: " + totalFiles);
myDropzone.processQueue();
});
myDropzone.on("sending", function(file, xhr, formData) {
uploadedFiles++;
console.log("Dosya gönderiliyor. Sıra: " + uploadedFiles + "/" + totalFiles);
formData.append("isMainPhoto", file === mainPhotoFile);
console.log("isMainPhoto:", file === mainPhotoFile);
if (uploadedFiles === totalFiles) {
console.log("Son dosya gönderiliyor. Form verileri ekleniyor.");
const additionalForm = document.getElementById("additionalForm");
new FormData(additionalForm).forEach((value, key) => {
formData.append(key, value);
console.log("Form verisi eklendi: " + key + " = " + value);
});
formData.append("isLastFile", "true");
}
});
myDropzone.on("success", function(file, response) {
console.log("Dosya yüklendi:", response);
if (uploadedFiles === totalFiles) {
console.log("Tüm dosyalar yüklendi");
uploadedFiles = 0;
totalFiles = 0;
}
});
myDropzone.on("error", function(file, errorMessage) {
console.error("Dosya yükleme hatası:", errorMessage);
});
</script>
</body>
</html>session_start();
header('Content-Type: application/json');
error_log("Yeni istek alındı: " . print_r($_POST, true));
error_log("FILES: " . print_r($_FILES, true));
$uploadDir = 'uploads/';
if (!file_exists($uploadDir)) {
mkdir($uploadDir, 0755, true);
}
if (!isset($_SESSION['upload_data'])) {
$_SESSION['upload_data'] = [
'files' => [],
'mainPhoto' => null,
'formData' => [],
'errors' => []
];
}
$response = [
'success' => true,
'message' => '',
'files' => [],
'mainPhoto' => null,
'formData' => [],
'errors' => []
];
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
$file = $_FILES['file'];
$isMainPhoto = isset($_POST['isMainPhoto']) && $_POST['isMainPhoto'] === 'true';
$isLastFile = isset($_POST['isLastFile']) && $_POST['isLastFile'] === 'true';
error_log("isMainPhoto: " . ($isMainPhoto ? 'true' : 'false'));
error_log("isLastFile: " . ($isLastFile ? 'true' : 'false'));
$fileName = uniqid() . '_' . basename($file['name']);
$filePath = $uploadDir . $fileName;
if (move_uploaded_file($file['tmp_name'], $filePath)) {
$_SESSION['upload_data']['files'][] = $filePath;
if ($isMainPhoto) {
$_SESSION['upload_data']['mainPhoto'] = $filePath;
error_log("Ana fotoğraf ayarlandı: " . $filePath);
}
error_log("Dosya başarıyla yüklendi: " . $filePath);
} else {
$_SESSION['upload_data']['errors'][] = "Dosya yüklenemedi: " . $fileName;
error_log("Dosya yükleme hatası: " . $fileName);
}
if ($isLastFile) {
error_log("Son dosya işleniyor. POST verileri: " . print_r($_POST, true));
foreach ($_POST as $key => $value) {
if ($key !== 'isMainPhoto' && $key !== 'isLastFile') {
$_SESSION['upload_data']['formData'][$key] = $value;
}
}
$response = array_merge($response, $_SESSION['upload_data']);
$response['message'] = 'Tüm dosyalar başarıyla yüklendi.';
error_log("Session verileri: " . print_r($_SESSION['upload_data'], true));
unset($_SESSION['upload_data']);
} else {
$response['message'] = 'Dosya başarıyla yüklendi.';
}
} else {
$response['success'] = false;
$response['message'] = "Geçersiz istek";
$response['errors'][] = "Dosya gönderilmedi";
error_log("Geçersiz istek veya dosya gönderilmedi");
}
error_log("Yanıt: " . print_r($response, true));
echo json_encode($response); 
