在dragenter跨瀏覽器解決方案上檢測文件類型

Question

我正在爲此尋找跨瀏覽器解決方案。我事先告訴你，我不想知道是否只是一個文件，因爲我找到了解決方案。我想知道該文件是否基本上是音頻，圖像或視頻。在Chrome中，當你火DragEnter事件，你可以從這裏得到的數據：

ev.originalEvent.dataTransfer.items[0].type; 

但在Firefox，Safari和IE瀏覽器的「項目」規範尚未applyed： https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items

在這些瀏覽器只能看到「文件」屬性：

ev.originalEvent.dataTransfer.files[0]; 

但上的dragenter files[0]是空的。我該如何解決這個問題才能知道這些其他瀏覽器中的文件類型？

實例（僅適用於Chrome）：

$(document).on('dragenter', '.drop-zone', function(ev) { 
 
    var e = ev.originalEvent; 
 
    e.dataTransfer.dropEffect = 'copy'; 
 
    var file = e.dataTransfer.items[0]; 
 
    var type = file.type.slice(0, file.type.indexOf('/')); 
 
    $(ev.target).html(type); 
 
}); 
 

 
$(document).on('dragleave', '.drop-zone', function(ev) { 
 
    $(ev.target).html('Drag your file over here to know the type, no need to drop it'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="drop-zone">Drag your file over here to know the type, no need to drop it</div>

Answer 1

TL;博士版本：你不能。

報價this answer：

DRAG_OVER沒有權利看到拖動事件的數據。

它適用於dragover和dragenter事件。

爲什麼？那麼，這將是一個嚴重的隱私問題。想象一下，你有一個MP3文件，出於某種原因，你想在瀏覽器中打開它。你可以做到這一點通過拖動和刪除瀏覽器標籤欄上，這樣的：

在拖和下降過程中，將文件拖動過上您當前頁面，當然你不希望這個頁面知道這個文件的任何內容。這就是爲什麼直到實際拖放文件才能獲取有關拖動文件的信息的原因。

---

你可以，但是，檢查drop事件的文件類型：

"drop dragover".split(" ").forEach(function(eventName) { 
 
    document.addEventListener(eventName, function(event) { 
 
    event.preventDefault(); 
 
    }); 
 
}); 
 
document.addEventListener("drop", function(event) { 
 
    console.log(event.dataTransfer.files[0].type); 
 
});

html, body { 
 
    height: 100%; 
 
}

<p>Try dropping a file.</p>

對於拖動和拖放瀏覽器支持見caniuse.com。