我正在玩 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
。
最佳答案
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
已弃用并返回一个空集合。
关于javascript - event.dataTransfer.files 与 event.dataTransfer.items,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44842247/