自答：

Question

我正在玩drag-and-drop API，有两种方法可以从DragEvent.dataTransfer收集文件，有readonly files: FileList和readonly items: DataTransferItemList。

似乎items是files的超集，从File[]收集items更复杂，旧版IE中也不支持items，所以files更容易使用，并且有更好的支持，但MDN上的文章首先使用items，只有在不受支持的情况下，才会切换到files。

我的问题是，如果我只需要从File[]收集DragEvent集合，我可以使用dataTransfer.files属性，还是dataTransfer.items有一些好处，这是值得的？

自答：

在现代浏览器（chrome）中，files集合为空。拖动的文件只能通过items访问，因此您不能完全依赖files。

Answer 1

我也没有找到任何关于这两个API之间差异的正确解释。但在我对该API进行实验后，我发现dataTransfer.items更新，定义为不仅提供文件丢弃，还提供拖放功能（即当您想要将某些项目从页面拖动到另一个时）你网页的一部分）。由于我不关心旧IE，我只使用dataTransfer.items。

Answer 2

dataTransfer.items和dataTransfer.files之间的主要区别在于dataTransfer.items还包含子目录。

如果要拖放子目录（例如，上载整个目录树以及其中的所有文件），这很重要

下面是一个将如何实现的示例：

function DragAndDrop_Handler(e) {
    e.preventDefault();

    var items = e.dataTransfer.items;
    for (var i=0; i<items.length; i++) {        
        var item = items[i].webkitGetAsEntry();  //Might be renamed to GetAsEntry() in 2020
        if (item) {
            GetFileTree(item);
        }
    }
}


function GetFileTree(item, path) {
    path = path || "";
    if (item.isFile) {

        item.file(function(file) {
            console.log(file);
        });

    } else if (item.isDirectory) {

        console.log(item.fullPath);  //console.log(item.name)

        // Get folder contents  
        var dirReader = item.createReader();
        dirReader.readEntries(function(entries) {
            for (var i=0; i<entries.length; i++) {
                GetFileTree(entries[i], path + item.name + "/");
            }
        });
    }
}

event.dataTransfer.files与event.dataTransfer.items

自答：

2 个答案: