如何判斷在javascript dragenter事件中拖動的內容是文本還是文件

使用dragenter事件我在網頁上顯示一個dropzone，以便快速上傳文件，並且一切正常。但是，拖動選定文本時，dropzone也會彈出。早期如何分辨差異？如何判斷在javascript dragenter事件中拖動的內容是文本還是文件

我知道drop事件暴露出使用dataTransfer.files迭代所有的文件內容，但爲時已晚。我需要它在dragenter，只有我看到文件數組在任何時候都是空的。
我需要完全控制的外觀&覺得我不是在尋找現有的庫。
我可以看到不同的值拖動文字與文件時event.dataTransfer.Clipboard.effectAllowed，但也值每個瀏覽器不同（鉻VS FF）。
MooTools是在地方，如果沒有什麼幫助。

來源

2011-03-16 Martin Kool

好的，我在Chrome和Firefox（3.6+）方面取得了足夠的進步，可以在差異化方面發揮作用。它可能不是萬無一失的，但萬一有人可能會發現它很有用，下面的代碼：

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

來源

2011-03-16 12:32:32

如果OP曾經回來，請註明此爲答案。它爲我工作！ – UltimateBrent 2012-11-28 21:27:17

[創建一個小提琴測試用例]（http://jsfiddle.net/xseFs/4/）。謝謝！ – Barney 2013-03-22 14:03:36

我寫了一個小功能來檢測文件拖動。

function isFileTransfer(evt){ 
    return [].some.call(evt.dataTransfer.types,function(t){return t=="Files";}); 
}

來源

2015-04-20 06:21:03 cuixiping

我需要確定一個文件是否從外部拖入瀏覽器，而不是從瀏覽器窗口中拖出的圖像。我通過偵聽文件對象的dragstart做到了。當一個文件被拖入從瀏覽器之外，該的dragstart不火。所以，如果它確實觸發了，這意味着正在拖動同一頁面內的某些內容。

document.addEventListener('dragstart', function() { 
    samePageDrag = true; 
}, false); 

document.addEventListener('dragend', function() { 
    if (samePageDrag) { 
     samePageDrag = false; 
    } 
}, false);

有了這個，你可以在的dragenter或的dragover事件之後檢查samePageDrag的價值，以確定是否被拖動的事情是從瀏覽器之外或沒有。

來源

2017-02-02 19:08:12

如何判斷在javascript dragenter事件中拖動的內容是文本還是文件

回答

相關問題