javascript - event.dataTransfer.files 与 event.dataTransfer.items

Question

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

看来 items 是 files 的超集，从 items 收集 File[] 更复杂，也 items 在旧的 IE 中不受支持，所以 files 更容易使用并且有更好的支持，但是 MDN 上的文章首先使用 items只有当它不受支持时，才切换到 files。

我的问题是，如果我只需要从 DragEvent 收集 File[] 集合，我可以使用 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 已弃用并返回一个空集合。