TechOverflow Logo
TechOverflow

JS Drag-&-Drop-Datei-Upload ohne Abhängigkeiten hinzufügen

English Deutsch

Problem:

Für deine neue Webanwendung möchtest du Drag-&-Drop-Datei-Uploads hinzufügen, ohne eine externe Bibliothek zu verwenden.

Lösung

Du kannst dieses Set von Funktionen verwenden, das du an deine Anwendung anpassen kannst.

dragdrop_upload.js
/**
 * Drag-&-Drop-Ereignisbehandlung für ein DOM-Element initialisieren.
 * Das DOM-Element muss dafür nicht leer sein.
 * @param elem Das DOM-Element, auf das Dateien gezogen & abgelegt werden können
 * @param callback Die callback(files)-Funktion, der eine Liste von Dateien übergeben wird,
 * wenn Dateien gezogen und abgelegt werden.
 *
 * Grundlegendes Verwendungsbeispiel:
 *  var elem = document.getElementById('mydiv');
 *  initializeDragAndDrop(elem, function(files) {
 *      for (var i = 0; i < files.length; i++) {
 *          // Etwas mit files[i] tun...
 *          handleUploadedFile(files[i]); // Durch deinen Code ersetzen
 *      }
 *  });
 */
function initializeDragAndDrop (elem, callback) {
    elem.addEventListener('drop', function (event) {
        _dragndrop_preventDefault(event);
        callback(event.dataTransfer.files);
    }, false);
    elem.addEventListener('dragover', _dragndrop_preventDefault, false);
    elem.addEventListener('dragdrop', _dragndrop_preventDefault, false);
    elem.addEventListener('dragenter', _dragndrop_preventDefault, false);
    elem.addEventListener('dragleave', _dragndrop_preventDefault, false);
}

/**
 * Interne Hilfsfunktion zum Verhindern der Standard-
 * Behandlung für ein gegebenes Ereignis.
 */
function _dragndrop_preventDefault (event) {
    event.stopPropagation();
    event.preventDefault();
}

Verwendungsbeispiel:

dragdrop_usage.js
var elem = document.getElementById('mydiv');
initializeDragAndDrop(elem, function(files) {
    for (var i = 0; i < files.length; i++) {
        // Etwas mit files[i] tun...
        handleUploadedFile(files[i]); // Durch deinen Code ersetzen
    }
});

Beachte, dass du initializeDragAndDrop erst ausführen musst, nachdem das jeweilige DOM-Element (mydiv in diesem Beispiel) geladen wurde. Du kannst es beispielsweise so aufrufen, wenn du jQuery verwendest:

dragdrop_jquery_init.js
$(document).ready(function() {
    initializeDragAndDrop(/* ... */);
});

Reines Javascript (ohne jQuery):

dragdrop_onload_init.js
// WARNUNG: Dies ersetzt jede aktuell gesetzte window.onload-Funktion.
// Außerdem wird dies erst ausgelöst, nachdem alles auf der Seite
// geladen wurde, was nicht das gewünschte Verhalten sein könnte.
window.onload = function() {
    initializeDragAndDrop(/* ... */);
};

Siehe auch diesen vorherigen TechOverflow-Beitrag zum Einlesen der hochgeladenen Dateien in den Speicher, falls benötigt.

Check out similar posts by category: Javascript