我正在收听该drop事件并正在执行e.preventDefault()但它试图打开丢弃的文件。直到昨天它都运行良好。但就在今天，它因某种未知原因而破裂。我做了一个JsFiddle#bwquR/10来反映相同。
看起来如果你不采取dragover事件drop就无法处理。即使在小提琴中，如果您发表评论，dragover它将行不通。
在实际工作中，我错过了拼写dragover但它仍然是一个问题，drop没有dragover
小提琴实际上正在工作，但身体太小了（DROP那里只有文字）。它只drop在DROP文本不在整个身体上的那个小区域发生事件。所以我认为它不起作用。对困惑感到抱歉。
我猜是因为没有dragOver事件处理程序，使用dragOver事件的默认事件处理程序，因此之后不会触发drop事件。e.preventDefault在放置事件之前需要使用dragOver 事件。
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations
如果要允许删除，则必须通过取消事件来阻止默认处理。您可以通过从属性定义的事件侦听器返回 false 或调用事件的 event.preventDefault 方法来执行此操作。在单独脚本中定义的函数中，后者可能更可行。
<div ondragover="return false">
<div ondragover="event.preventDefault()">
在 dragenter 和 dragover 事件期间调用 preventDefault 方法将指示在该位置允许放置。但是，您通常希望仅在某些情况下调用 preventDefault 方法，例如，仅当链接被拖动时。为此，请调用一个函数，该函数检查条件并仅在满足条件时取消事件。如果不满足条件，则不要取消该事件，如果用户释放鼠标按钮，则不会发生放置。
https://developer.mozilla.org/en-US/docs/Web/Events/dragover
/* events fired on the drop targets */
document.addEventListener("dragover", function( event ) {
// prevent default to allow drop
event.preventDefault();
}, false);
我不确定我是否正确理解了您的问题，但是如果您想读取拖放的文件，则需要处理拖动事件并至少放置以下代码行：
evt.dataTransfer.dropEffect = 'copy';
否则 dropEffect 默认为 null，您将不会获得任何数据。
对我来说很好用。您是将其作为 HTTP 还是 FILE URL 加载？我相信它需要是 Chrome 的 HTTP URL。