weis nicht wie mann das ein baut aber ich habe ein Code DragDrop_upload:
oben bei $uploadDir = ‘images’; must du nur dein ordner eingeben wo das bild hinkommt beispiel der link zum download ordner für den shop oder was anderes. scroll ganz runte da steht mal fetch(“dragdrop_upload.php” mus verlinkt werden wo du die datei : dragdrop_upload.php hochgeladen hast.
<?php
// Handle uploads
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$uploadDir = 'images/';
$responses = [];
foreach ($_FILES['files']['tmp_name'] as $key => $tmpName) {
$name = basename($_FILES['files']['name'][$key]);
$targetFile = $uploadDir . $name;
if (move_uploaded_file($tmpName, $targetFile)) {
$responses[] = "$name hochgeladen!";
} else {
$responses[] = "Fehler beim Hochladen von $name!";
}
}
echo json_encode($responses);
exit;
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Drag & Drop Upload</title>
<style>
body {
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}
#drop-area {
border: 2px dashed #888;
border-radius: 20px;
width: 80%;
max-width: 500px;
margin: auto;
padding: 30px;
background-color: #111;
}
#drop-area.hover {
border-color: #00eaff;
}
#fileElem {
display: none;
}
.status {
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Drag & Drop Bild Upload</h2>
<div id="drop-area">
<p>Dateien hierher ziehen oder <label for="fileElem" style="color: #00eaff; cursor: pointer;">Dateien auswählen</label></p>
<input type="file" id="fileElem" multiple accept="image/*">
</div>
<div class="status" id="status"></div>
<script>
const dropArea = document.getElementById("drop-area");
const fileElem = document.getElementById("fileElem");
const status = document.getElementById("status");
dropArea.addEventListener("dragover", (e) => {
e.preventDefault();
dropArea.classList.add("hover");
});
dropArea.addEventListener("dragleave", () => {
dropArea.classList.remove("hover");
});
dropArea.addEventListener("drop", (e) => {
e.preventDefault();
dropArea.classList.remove("hover");
handleFiles(e.dataTransfer.files);
});
fileElem.addEventListener("change", () => {
handleFiles(fileElem.files);
});
function handleFiles(files) {
const formData = new FormData();
for (const file of files) {
formData.append("files[]", file);
}
fetch("dragdrop_upload.php", {
method: "POST",
body: formData
})
.then(res => res.json())
.then(data => {
status.innerHTML = data.map(line => `<p>${line}</p>`).join("");
})
.catch(() => {
status.innerHTML = "<p style='color:red;'>Fehler beim Upload</p>";
});
}
</script>
</body>
</html>
