e.dataTransfer.files.length showing up as 0

本文关键字：up as showing length dataTransfer files 更新时间：2023-09-26

我正在做HTML5中非常标准的拖放功能。然而，由于某些原因，e.target. datattransfer显示为未定义。我是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不是作为常规类型的对象呈现的。我怀疑File API依赖于"及时"的内容交付。当drop容器不能正确处理数据时，为什么要携带所有数据的开销呢?

一旦数据被请求(使用for循环)，File API将填充适当的内部数据结构以供调用代码使用。

注意for循环并不是循环计数——它实际上是在给定索引处请求文件。如果文件不可用，File API返回false。这就是实际导致文件被加载以供代码使用的原因-以及在没有更多文件时取消for循环。

虽然我不能明确地回答你的"为什么"的问题，但至少这可以让你继续前进。一旦循环遍历了可用文件，就可以使用FileList长度(以及所需的任何其他数据)。

我希望这对你有帮助。

祝你好运!

好的。明白了。问题出在我使用的Firefox版本上。我尝试了IE11，它现在工作得很好。我没有检查对FileApi的支持。