当ondrop被触发时,event.dataTransfer.files为空？

Question

好的,我有一个元素设置来接收文件丢弃事件,但当我查看event.dataTransfer它是空白.我还没有开始学习拖放式HTML5 API,我仍然有点模糊.我正在我的网站上工作.如果您不介意浏览我的代码并查看正在发生的事情,我们将非常感激.event正在记录整个对象.

Answer 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))`有效.我个人觉得这令人作呕,让我失去了几个小时 - 为什么？谁知道.但对于遇到此问题的其他任何人来说,这都是个问题. (23认同)
2022 年了，仍然是一个错误。需要给这个人买杯咖啡 (10认同)
2020 年的错误在 2020 年仍然存在。这是完全不可接受的 (9认同)
2021 年仍然是一个错误:( (9认同)
2023年，谢谢你！我永远无法弄清楚这一点......这怎么仍然是一个错误哈哈 (4认同)
2020 年大灾难一年后。即使 `event.dataTransfer.files.length` 为 0，而 `event.dataTransfer.items` 有 2 个文件项 (3认同)
在2012年仍会观察到从2012年开始的“错误”。在此问题上是否存在任何已知的已报告的错误，或者是更多原因导致这种奇怪行为的背景？ (2认同)
救了我！谢谢你！ (2认同)

Answer 2

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