1 Pluspunkt 0 Minuspunkte
Wie kann ich mit HTML ein Div erstellen wo man Dateien darauf ziehen und damit hochladen kann?
von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

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>
von (542 Punkte)