Eğer bir klasör veya bir dosya getirmiş olup olmadığını tespit etmek için çalışıyorumdragoveryadragenterolaylar.

Örneğin:

İçinde ondrop olay, bir tartışma denir MouseEvent belirli bir alan adında dataTransfer nerede listelenen dosyalar (.files) veya öğeleri (.items) bağlı olarak, tarayıcı, ve ben okumak hem Chrome Firefox. Ancak, dragover dragenter olaylar için bu alanlar (.files .items) boş. Sorun buSürükleyerek bırakarak değil iken bu bilgiye ihtiyacım var.

Her iki dosya ve klasörleri event.dataTransfer.types[i] === "Files" true. NOT:

Arka Plan Araştırma

the following answer kısmen benim sorum için uygun buldum:

Y ve bu nedenle Krom, getData diyebilirsin zaman oldukça kısıtlayıcı. dragstart dragover içinde bunu yapmaya hakkın yok. Bu kurallı hata olduğunu düşünüyorum.

Ama o cevap 2012 ve danKonuyla ilgili gerçek güncel bilgi bulamıyorumben bu konuda güncel bilgi arıyorum. yani ben

^{TL;DR edemezsin.}

HTML5 18*/drop *dosya

Dosyaları sürükle ve bırak hakkında bildiğim tüm özetlemeye karar verdim bu konu için çok kullanılan bazı araştırmalar yaptım ve çeşitli tarayıcılarda kendim test.

Sürükleme

Bir dosya sürükleyin, bazı dinleyiciler kullanın, gibi:

• dragenter
• dragover
• dragend
• dragleave

Bu drag olaylar göz önüne alındığında, event.dataTransfer files özelliği length == 0 ya da boş olması (null).Sürükle bir olay dosyaları ayrıntıları okuyamazsın ve klasörleri kontrol edebilirsiniz.Bu bir hata değil, bir güvenlik önlemi. Sürükle bir olay dosyalarını okuyabilir düşünün: eğer kullanıcı sitenize dosya yüklemek istemiyor bile her şeyi okumak mümkün olacak. Anlamı yok, cidden. Başka bir klasöre masaüstünden bir dosyayı sürükleyerek düşünün ve yanlışlıkla bir web sayfası üzerinden sürükleyin: şimdi web sayfası dosyası okur ve sunucu üzerinde kişisel bilgileri saklar...bu büyük gizlilik ve Güvenlik bir hata olurdu.

Ancak, yine de eğer dizi event.dataTransfer.types içinde dolaşmak dosyaları bırakarak olup olmadığını tespit etmek mümkün olacak. Sürükle olay dosyaları içerir ve sonra da olay işleyicisi içinde çağrı kontrol eden bir fonksiyon oluşturabilirsiniz.

Örnek:

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;
}

function handleDragEnter(e) {
    e.preventDefault();
    if containsFiles(e) {
        // The drag event contains files
        // Do something
    } else {
        // The drag event doesn't contain files
        // Do something else
    }
}

Düşüyor

Ne zaman açılır bir dosya içine damla <div> (veya herhangi bir öğesi kullanıyorsun olarak dropzone), kullanacak bir dinleyici için olay drop okuma bazı dosya özellikleri gibi adı, boyutu, türü ve son değiştirilme tarihi.

Eğer bir dosya klasörü olup olmadığını tespit etmek olacak

1. Eğer dosya klasörleri hiçbir türü olduğundan 33**, olup olmadığını kontrol edin.
2. Eğer dosya boyutu 4096 birden fazla olup olmadığını kontrol edin: klasörler her zaman 4096 bayt 4KiB olan) bir boyut birden fazla var. çünkü 34**,

Örnek:

function handleDrop(e) {
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files;

    for (var i = 0, f; f = files[i]; i  ) { // iterate in the files dropped
        if (!f.type && f.size@96 == 0) {
            // The file is a folder
            // Do something
        } else {
            // The file is not a folder
            // Do something else
        }
    }
}

BİLİNEN SORUN:O klasörler aslında dosyalar olduğundan, bu dosya başka bir tür onları ayırmak için tek yoldur. Bir dosya klasörü olan bu yöntem, mutlak kesinlik vermiyor olsa da: ya N x 4096bytes 0 tam boyutunda uzantısı olmayan bir dosya olabilir.

Çalışma örnekleri

Burada söylediklerim yukarıda Eylem olarak görüyor ve kendi kendine test için bazı çalışma örnekleri. Onları çalıştırmadan önce, tarayıcınız supports drag and drop features emin olun. İyi eğlenceler:

• File drop display info (benim tarafımdan yapılmış)
• File/folder recognize (benim tarafımdan yapılmış)
• File drag detect (css-tricks)