触发 ondrop 时 event.dataTransfer.files 为空？答案

【问题标题】：event.dataTransfer.files is empty when ondrop is fired?触发 ondrop 时 event.dataTransfer.files 为空？
【发布时间】：2012-07-19 09:32:09
【问题描述】：

好的，我设置了一个元素来接收文件删除事件，但是当我查看 event.dataTransfer 时，它是空白的。我还没有开始学习拖放式 HTML5 API，而且对它还有点迷糊。我正在my site 处理它。如果您不介意浏览我的代码并查看发生了什么，我们将不胜感激。正在记录整个 event 对象。

【问题讨论】：

见这里 [e.originalEvent.dataTransfer ...][1] [1]: stackoverflow.com/questions/8189918/…
我也有同样的问题，请看：stackoverflow.com/questions/69165465/…如果你有解决办法。

标签： javascript html drag-and-drop

【解决方案1】：

它工作正常，只是控制台的一个错误。

function onDrop(event) {
    event.preventDefault();
    console.log(event.dataTransfer.files[0]);
}

【讨论】：

请注意：您必须小心。此错误意味着您将在控制台中看到以下任何一项的空对象：console.log(JSON.stringify(event))、console.log(JSON.stringify(event.dataTransfer))、console.log(JSON.stringify(event.dataTransfer.files)) 和 console.log(JSON.stringify(event.dataTransfer.files[0]))。仅显示叶节点，例如console.log(JSON.stringify(event.dataTransfer.files[0].name)) 有效。我个人觉得这令人作呕，浪费了我几个小时——为什么？谁知道。但这对于遇到此问题的其他人来说是一个提示。
2012 年的“错误”在 2019 年仍然存在。是否有关于此问题的已知报告错误或导致此奇怪行为的更多背景？
2020 年的错误在 2020 年仍然存在。这直接是不可接受的
救了我！谢谢！ ?
在 2021 年仍然是一个错误 :(

【解决方案2】：

还请查看此错误/行为：HTML5 drop event doesn't work unless dragover is handled

基本上，您需要处理悬停/拖动并指定 dropEffect

【讨论】：

什么意思？我指向一个链接，该链接解释了与拖放相关的奇怪行为，如果您未在拖放处理程序中指定 dropEffect，则 dataTransfer 对象在拖放处理程序中将没有任何信息（至少有时 - 我仅在 ubuntu 上的 chrome 上看到了这个，而不是在 macos 上）。我还指出了我链接到的页面中包含的内容的要点。你还需要什么？
通常在 SO 上，您希望将代码/解决方案直接放在您的答案中。这可以防止将来出现死链接:)
很公平 - 可能值得一个重复的标志，真的。
对，这对我有用。在 dragstart 事件中，输入以下代码：event.dataTransfer.effectAllowed = "all"; event.dataTransfer.dropEffect = "move"

【解决方案3】：

我找到了我需要的东西：

e.originalEvent.dataTransfer

【讨论】：

这个问题与 JQuery 无关
感谢您的回答，它解决了我的问题（使用 Jquery）