拖放 - DataTransfer对象

Question

拖放 - DataTransfer对象

15

我正在构建一个简单的拖放上传器，但当我使用console.log(e)（DragEvent）并查看DragEvent.dataTransfer.files时，它显示为空，而我无法看到我拖放的文件，不知道为什么... 但是，如果我使用console.log(e.dataTransfer.files)，它将显示已拖放的文件。

//CODE

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", init);
function init(){
    var dropbox = document.getElementById('dropbox');
    dropbox.addEventListener('dragover', drag.over);
    dropbox.addEventListener('drop', drag.drop);
}
var drag = {
    "over": function(e){
        e.preventDefault();
    },
    "drop": function(e){
        e.preventDefault();
        console.log(e); //NO FILES SHOWN
        console.log(e.dataTransfer.files); //FILES in FileList Object
    }   
};  
</script>
<style>
body{
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
}
#dropbox{
    height: 400px;
    width: 400px;
    align-self: center;
    background-color: #0089C4;
    border-radius: .3em;
    border: 1px dashed black;
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
}
</style>
</head>
<body>
    <div id="dropbox"></div>    
</body> 
</html>

- Jordan Davis

当您在控制台中单击对象时，它可能已经通过多个函数更改了其属性。那么为什么您还期望它保持不变呢？如果您以后需要它，可以将其冻结、克隆或复制值。 - Buksy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Julien Grégoire · Accepted Answer

拖放数据存储器（drag data store）根据访问时的不同情况有不同的模式：

在dragstart事件上，它处于读/写模式。
在drop事件上，它处于只读模式。
在所有其他事件上，它处于保护模式。

保护模式定义如下:

保护模式

适用于所有其他事件。可以枚举代表拖动数据的项目列表中的格式和种类，但数据本身不可用，并且无法添加新数据。

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

这意味着当您在控制台中访问dataTransfer对象时，如果不是在drop或dragstart事件中，它处于保护模式，禁止您访问数据。

由于您在dataTransfer可读时记录了fileList，因此可以查看fileList。但是，如果记录e.dataTransfer或e，您将无法访问任何数据。

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

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();
}

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