我正在构建一个简单的拖放上传器，并且想知道为什么当我console.log(e)(DragEvent)并查看DragEvent.dataTransfer.files时显示为空的时候为什么看不到我拖放的文件，但是...如果我console.log(e.dataTransfer.files)它会显示被删除的文件。
//代码
<!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>
最佳答案
拖动数据存储区具有不同的模式，具体取决于您访问它的时间:
dragstart事件上，它处于读/写模式下。 drop事件中，它处于只读模式。 通过以下方式定义 protected 模式:
看到这里:https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store
这意味着，当您访问控制台中的
dataTransfer对象(不在drop或dragstart事件上)时，它处于保护的模式下，从而阻止您访问数据。您可以查看
fileList，因为您可以在fileList可读的情况下将drop记录在dataTransfer事件上。但是，如果您记录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>关于javascript - 拖放-DataTransfer对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33420306/