Question

我正在构建一个简单的拖放上传器，我想知道为什么在我console.log(e)（DragEvent）时看不到我丢弃的文件并查看{{1}它显示为空，但是...如果我DragEvent.dataTransfer.files它将显示已删除的文件。

// CODE

console.log(e.dataTransfer.files)

Answer 1

拖动数据存储具有不同的模式，具体取决于您访问它的时间：

在dragstart事件中，它处于读/写模式。
在drop事件中，它处于只读模式。
在所有其他活动中，它处于受保护的模式。

受保护的模式以这种方式定义：

保护模式

适用于所有其他活动。拖动数据存储中的格式和种类   表示拖动数据的项目列表可以枚举，但是   数据本身不可用，无法添加新数据。

见这里：https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

这意味着当您访问控制台中的dataTransfer对象时，该对象不在drop或dragstart事件中，而是在受保护模式，阻止您访问数据。

您可以查看fileList，因为当fileList可读时，您会在drop事件上记录dataTransfer。但是，如果您记录e.dataTransfer或e，则无法访问任何数据。

您可以在此处进行测试，即使在dragover上您无法访问dataTransfer中的内容：

＆＃13;

document.querySelector('#droppable').ondragover = function(e) {
  console.log('on dragover files are', e.dataTransfer.files)
  e.preventDefault();
}

document.querySelector('#droppable').ondrop = function(e) {
  console.log('on drop files are', e.dataTransfer.files)
  e.preventDefault();
}

＆＃13;

<div id=droppable>Drop a file</div>

＆＃13;

拖拽Drop - DataTransfer对象

1 个答案: