Test, ob dragenter/dragover-Event Dateien enthält

HTML5 Drag and Drop ist großartig für die Handhabung von Datei-Uploads. Aber wenn Sie es nur dafür verwenden, ist es gut zu wissen, ob ein bestimmtes dragenter- oder dragover-Ereignis tatsächlich Dateien enthält. Im Gegensatz zu beispielsweise dem Ziehen von ausgewählten Text.

Senden Sie das Event-Objekt an diese Funktion und sie wird die Wahrheit zurückgeben (vorausgesetzt, Sie befinden sich in einem Browser, der dies alles unterstützt)

function containsFiles(event) {

    if (event.dataTransfer.types) {
        for (var i = 0; i < event.dataTransfer.types.length; i++) {
            if (event.dataTransfer.types[i] == "Files") {
                return true;
            }
        }
    }
    
    return false;

}

Kommentare

dgriesel

# 13. August 2013

Wie wäre es damit?

if ( t = event.dataTransfer.types )
    return t.contains("Files")

Antworten

tbruun

Permalink zum Kommentar# 14. Januar 2014

Seien Sie vorsichtig, dass types in Firefox eine DOMStringList ist, während es in Chrome ein Array ist. Sie können types.indexOf("Files") !== -1 verwenden, aber das funktioniert nicht mit der DOMStringList. Zu diesem Zeitpunkt können Sie genauso gut die Lösung des Autors verwenden.

Jeff Ayer

# 7. April 2014

Eine andere Variante für ie9+

containsFiles = function(e) {
    var dataType = Array.prototype.slice.call(e.dataTransfer.types);

    dataType = dataType.filter(function(e) {
        return e == "Files";
    });

    return dataType.length;
}

Antworten

Vclav

# 3. Juni 2016

Einfachere und effizientere Version

isEventWithFiles(event) {
    var temp = (event.originalEvent || event).dataTransfer;
    return temp && (temp = temp.types) && temp[0] === 'Files';
}

PS: Funktioniert mit jedem Event, auch mit jQuery Event-Objekten.

Antworten

Marek

Permalink zum Kommentar# 4. Dezember 2018
Besser ist
```
return temp && (temp = temp.types) && (temp.indexOf('Files') != -1);
```
da Firefox den Typ Array [ "application/x-moz-file", "Files" ] hat

Kommentare

Antwort hinterlassen Antwort abbrechen