拖放 - DataTransfer对象
[英]Drag & Drop - DataTransfer object
问题描述
I'm building a simple drag n' drop uploader and I'm wondering why I can't see the file(s) I drop when I console.log(e) (DragEvent) and look at the DragEvent.dataTransfer.files it shows up empty, but... if I console.log(e.dataTransfer.files) it will show the dropped file(s). 
我正在构建一个简单的拖放上传器，我想知道为什么我无法看到我在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>
1 个解决方案
解决方案1
7 已采纳 2015-11-02 23:33:46
The drag data store has different modes depending on when you access it: 拖动数据存储具有不同的模式，具体取决于您访问它的时间：
- On
dragstartevent it's on read/write mode.在dragstart事件中，它处于读/写模式。 - On
dropevent, it's in read only mode.在drop事件中，它处于只读模式。 And on all other events, it's in protected mode.
在所有其他事件中，它处于保护模式。 Protected mode is defined this way:
保护模式以这种方式定义：
Protected mode
For all other events.
See here: https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store 请参见： https ： //html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store
That means that when you access the dataTransfer object in your console, which is not on drop or dragstart event, it's in protected mode, preventing you from accessing the data. 这意味着当您访问控制台中的dataTransfer对象（不是drop或dragstart事件）时，它处于保护模式，阻止您访问数据。
You can view the fileList because you log the fileList on drop event when dataTransfer is readable. 您可以查看fileList因为当dataTransfer可读时您在drop事件上记录fileList 。 But if you log e.dataTransfer or e , you won't be able to access any data. 但是，如果您记录e.dataTransfer或e ，您将无法访问任何数据。
You can test here, even on dragover you can't access what's in dataTransfer : 你可以在这里测试，即使在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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.