我正在 HTML5 中做一个非常标准的拖放功能。但是，出于某种原因，e.target.dataTransfer 显示为未定义。我是 javascript 的新手。任何帮助将不胜感激。
这是java脚本。
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document)
.ready(
function() {
jQuery.event.props.push('dataTransfer');
if (!!window.FileReader) {
// Browser suppports FILE API.
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
$('#drag-and-drop-zone').bind('dragover',
function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('drag-over');
return false;
});
$('#drag-and-drop-zone').bind('dragleave',
function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('drag-over');
return false;
});
$('#drag-and-drop-zone')
.bind(
'drop',
function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass(
'drag-over');
alert(this.id);
alert('This shows up as 0. Why? . '
+ e.dataTransfer.files.length);
return false;
});
}
} else {
// Browser does not support FILE API.
$('#drag-and-drop-zone')
.html(
'Upgrade your browser. Find something that can handle HTML5.');
}
});
</script>
这是 HTML
<body>
<div id="drag-and-drop-zone">Drag and drop the organization data
file on this area.</div>
</body>
当我运行它时 - 以某种方式注册了文件删除，因为触发了正确的事件。但不知何故，文件数量显示为 0。请帮忙。
最佳答案
非常有趣!
将以下行添加到您拥有的 drop 函数中 - 在您的警报消息之前。
var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
console.log('f: ', f);
}
您会注意到您的警报不再显示 0。当我拖动单个文件时，它显示 1(如预期)。当我拖动多个文件时，它还会显示正确的计数。
我不是内部专家，但是当我查看 FireBug 控制台时，我注意到 FileList 没有显示为常规类型的对象。我怀疑文件 API 依赖于内容的“及时”交付。这是有道理的，当放置容器可能无法正确处理它时，为什么还要携带所有数据的开销。
一旦请求了数据(使用 for 循环)，File API 就会填充适当的内部数据结构以供调用代码使用。
请注意 for 循环不会遍历计数 - 它实际上请求给定索引处的文件。如果文件不可用，File API 返回 false。这实际上导致文件被加载以供您的代码使用 - 以及在没有更多文件时取消 for 循环。
虽然我无法具体回答您“为什么”的问题，但至少这可以让您继续前进。循环遍历可用文件后，您可以使用 FileList 长度(以及您需要的任何其他数据)。
希望对您有所帮助。
祝你好运!
关于javascript - e.dataTransfer.files.length 显示为 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31640420/