Question

我的照片放置区域出现问题，dataTransfer无效，最终返回为undefault。请帮帮我，告诉我哪里弄错了。谢谢。

jQuery(document).ready(function ($) {
$('#dropbox').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) {
    e.preventDefault();
});

$('#dropbox').on('drop', function(e){
    e.preventDefault();
    var files = e.dataTransfer.files;
    console.log(files);
    if(files.length>1) console.log("noooo!");
    else
    {
        console.log("Drop!");
    } 
});
});

div {
    width:600px;
    height:300px;
    background:#FFFCCC;
}

<html>
    
    <body>
        <div id="dropbox"></div>
    </body>

</html>

Answer 1

由于您使用的是jQuery，因此您拥有的event（drop内）不是原始事件，而是jQuery包装器。

您可以使用e.originalEvent来获取原始活动，并且您拥有dataTransfer.files：

e.originalEvent.dataTransfer.files

这是一个有效的例子：

jQuery(document).ready(function ($) {
  $('#dropbox').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) {
    e.preventDefault();
  });

  $('#dropbox').on('drop', function(e){
    e.preventDefault();
    debugger;
    var files = e.originalEvent.dataTransfer.files;
    console.log(files);
    if(files.length>1) console.log("noooo!");
    else
    {
      console.log("Drop!");
    } 
  });
});

div {
  width:600px;
  height:300px;
  background:#FFFCCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropbox"></div>

删除文件，文件属性无法读取未定义

1 个答案: