Tec*_*ood 6 html javascript html5-filesystem
我正在 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。请帮忙。
很有意思！
将以下行添加到您拥有的放置功能中 - 在警报消息前面。
var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
console.log('f: ', f);
}
您会注意到您的警报不再显示 0。当我拖动单个文件时，它显示 1（如预期）。当我拖动多个文件时，它还显示了正确的计数。
我不是内部专家，但是当我查看 FireBug 控制台时，我注意到 FileList 没有作为常规类型的对象呈现。我怀疑文件 API 依赖于“及时”内容交付。这是有道理的，当放置容器可能无法正确处理所有数据时，为什么要承担所有数据的开销呢？
一旦请求数据（使用 for 循环），文件 API 就会填充适当的内部数据结构以供调用代码使用。
请注意，for 循环不会循环计数 - 它实际上请求给定索引处的文件。如果文件不可用，则文件 API 将返回 false。这实际上是导致文件被加载以供代码使用的原因 - 以及当没有更多文件时取消 for 循环。
虽然我无法具体回答你的“为什么”问题，但至少这可以让你继续前进。循环访问可用文件后，您可以使用 FileList 长度（以及您需要的任何其他数据）。
我希望这有帮助。
祝你好运！
| 归档时间： |
|
| 查看次数： |
3601 次 |
| 最近记录： |