event.dataTransfer.files与event.dataTransfer.items

Question

我正在使用拖放式API,有两种方法可以从a收集文件DragEvent.dataTransfer,有readonly files: FileList和readonly items: DataTransferItemList.

它似乎items是超集files,收集File[]来自items更复杂,并且items在旧的IE中也不受支持,因此files更容易使用并且具有更好的支持,但是MDN上的文章items首先使用并且仅当它不受支持时才切换到files.

我的问题是,如果我只需要收集File[]收藏品DragEvent,我可以选择dataTransfer.files房产还是dataTransfer.items有一些好处,这值得吗？

自答案:

在现代浏览器(chrome)中,files集合为空.拖动的文件只能通过items,因此您不能单独依赖files.

Answer 1

之间的主要区别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 + "/");
            }
        });
    }
}

注意：在 Chrome 浏览器中，dataTransfer.files已弃用并返回一个空集合。

Answer 2

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