Funktionsweise des Drag & Drop QR-Code Generators

Dieser HTML-Code ermöglicht es, Dateien oder Text per Drag & Drop in einen Bereich zu ziehen und daraus einen QR-Code zu generieren.

Schritte:

1. Drag & Drop: Der Benutzer zieht eine Datei oder Text in den markierten Bereich (#drop-zone).
2. Ereignisverarbeitung:
   • dragover: Wenn etwas über den Bereich gezogen wird, wird der Bereich visuell hervorgehoben.
   • dragleave: Wenn das Ziehen beendet wird, wird die Hervorhebung entfernt.
   • drop: Wenn die Datei oder der Text fallen gelassen wird, wird das Ereignis verarbeitet.
3. Dateiverarbeitung:
   • Wenn eine Datei gezogen wurde, wird der Dateiname verwendet, um einen QR-Code zu generieren.
4. Textverarbeitung:
   • Wenn Text gezogen wurde, wird der Text direkt verwendet, um einen QR-Code zu generieren.
5. QR-Code-Generierung:
   • Die Funktion generateQRCode wird aufgerufen, um den QR-Code zu erstellen.
   • Die qrcodejs-Bibliothek wird verwendet, um den QR-Code im #qrcode-Bereich anzuzeigen.
6. Fehlerbehandlung:
   • Wenn keine Datei oder Text gefunden wird, wird eine Meldung in der Konsole angezeigt.
   • Wenn ein Fehler bei der QR-Code-Generierung auftritt, wird eine Fehlermeldung in der Konsole angezeigt.

Dieser Code ist rein clientseitig und benötigt keinen Server, da er den QR-Code direkt aus dem Dateinamen oder dem gezogenen Text generiert.