Javascript e、 dataTransfer.files.length显示为0_Javascript_Html_Html5 Filesystem

Javascript e、 dataTransfer.files.length显示为0

javascript html

Javascript e、 dataTransfer.files.length显示为0,javascript,html,html5-filesystem,Javascript,Html,Html5 Filesystem,我正在HTML5中做一个相当标准的拖放功能。但是，由于某些原因，e.target.dataTransfer显示为未定义。我是javascript新手。任何帮助都将不胜感激这是java脚本 <script src="jquery-2.1.4.min.js"></script> <script> $(document) .ready( function() {

我正在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>


$（文件）
.准备好了吗(
函数（）{
jQuery.event.props.push（'dataTransfer'）；
如果（！！window.FileReader）{
//浏览器支持文件API。
//XHR2可用吗？
var xhr=new XMLHttpRequest（）；
if（xhr.upload）{
$（“#拖放区”）.bind（'dragover'，
职能（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（this.addClass（'drag-over'）；
返回false；
});
$（“#拖放区”）.bind（'dragleave'，
职能（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（this.removeClass（'drag-over'）；
返回false；
});
$（“#拖放区”）
.绑定(
"放下",，
职能（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（此）.removeClass(
"拖过";；
警报（this.id）；
警报（'显示为0。为什么？'
+e.dataTransfer.files.length）；
返回false；
});
}
}否则{
//浏览器不支持文件API。
$（“#拖放区”）
.html(
“升级你的浏览器。找到可以处理HTML5的东西。”）；
}
});

这是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控制台时，我注意到文件列表不是作为常规类型的对象显示的。我怀疑文件API依赖于内容的“即时”交付。这是有道理的，当drop容器可能无法正确处理数据时，为什么还要占用所有数据的开销呢

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

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

虽然我无法具体回答你的“为什么”问题，但至少这可以让你继续前进。循环浏览可用文件后，可以使用文件列表长度（以及所需的任何其他数据）

我希望这有帮助

祝你好运

好的。知道了。问题在于我使用的Firefox版本。我试过使用IE11，现在效果很好。我未能检查FileApi的支持情况