Hier ist ein Beispiel das ein Div mit der ID "drop-area" erstellt, auf dem Benutzer Dateien ziehen und ablegen können. Das JavaScript verarbeitet die Drag-and-Drop Ereignisse und lädt die hochgeladenen Dateien mithilfe der Fetch-API auf den Server hoch. Online Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop File Upload</title>
<style>
#drop-area {
border: 2px dashed #ccc;
border-radius: 20px;
width: 300px;
height: 200px;
padding: 20px;
text-align: center;
font-family: Arial, sans-serif;
margin: 50px auto;
}
#drop-area.highlight {
border-color: purple;
}
p {
margin-top: 0;
}
</style>
</head>
<body>
<div id="drop-area" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)" ondrop="handleDrop(event)">
<p>Drag & drop files here to upload</p>
</div>
<script>
function handleDragOver(event) {
event.preventDefault();
event.stopPropagation();
event.dataTransfer.dropEffect = 'copy';
document.getElementById('drop-area').classList.add('highlight');
}
function handleDragLeave(event) {
event.preventDefault();
event.stopPropagation();
document.getElementById('drop-area').classList.remove('highlight');
}
function handleDrop(event) {
event.preventDefault();
event.stopPropagation();
document.getElementById('drop-area').classList.remove('highlight');
const files = event.dataTransfer.files;
handleFiles(files);
}
function handleFiles(files) {
for (let i = 0; i < files.length; i++) {
uploadFile(files[i]);
}
}
function uploadFile(file) {
const formData = new FormData();
formData.append('file', file);
// Hier kannst du die URL des Upload-Endpunkts einfügen
const uploadUrl = 'upload.php';
fetch(uploadUrl, {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error('Upload failed');
})
.then(data => {
console.log('Upload successful:', data);
// Hier kannst du den Benutzer über den erfolgreichen Upload informieren
})
.catch(error => {
console.error('Error:', error);
// Hier kannst du den Benutzer über einen Uploadfehler informieren
});
}
</script>
</body>
</html>