Question

我在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.请帮忙。

Answer 1

非常有趣！

将以下行添加到您拥有的放置功能中 - 在警报消息前面。

var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
    console.log('f: ', f);
}

您会注意到您的提醒不再显示0.当我拖动单个文件时，它显示为1（正如预期的那样）。当我拖动多个文件时，它也显示了正确的计数。

我不是内部的专家，但是当我查看FireBug控制台时，我注意到FileList并未作为常规类型的对象呈现。我怀疑File API依赖于＆＃34; Just In Time＆＃34;交付内容。这是有道理的，为什么当drop容器可能无法正确处理它时，随身携带所有数据的开销。

一旦请求数据（使用for循环），File API就会填充适当的内部数据结构以供调用代码使用。

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

虽然我无法专门回答你的问题，为什么＆＃34;，至少这可以让你继续前进。一旦您浏览了可用文件，就可以使用FileList长度（以及您需要的任何其他数据）。

我希望这会有所帮助。

祝你好运！

Answer 2

确定。得到它了。问题在于我使用的Firefox版本。我尝试使用IE11，现在工作正常。我没有检查FileApi的支持。

e.dataTransfer.files.length显示为0

2 个答案: