[英]event.dataTransfer.files vs. event.dataTransfer.items
I'm playing with drag-and-drop API and there are two ways of gathering files from a DragEvent.dataTransfer
, there is readonly files: FileList
and readonly items: DataTransferItemList
.我正在玩拖放 API ,有两种方法可以从DragEvent.dataTransfer
收集文件,有readonly files: FileList
和readonly items: DataTransferItemList
。
It seems that items
is superset of files
, gathering File[]
from items
is more complicated and also items
are not supported in older IE, so files
are easier to work with and has better support, yet the article on MDN uses items
first and only when its not supported, switch to files
.似乎items
是files
超集,从items
收集File[]
更复杂,并且旧 IE 不支持items
,因此files
更易于使用并且具有更好的支持,但是 MDN 上的文章首先且仅使用items
如果不支持,请切换到files
。
My question is, if I need to gather only File[]
collection from DragEvent
, can I go with dataTransfer.files
property or does dataTransfer.items
has some benefits, which is worth?我的问题是,如果我只需要从DragEvent
收集File[]
集合,我可以使用dataTransfer.files
属性还是dataTransfer.items
有一些好处,值得吗?
In modern browser (chrome), the files
collection is empty.在现代浏览器 (chrome) 中, files
集合是空的。 The dragged file is reachable only through items
, so you cannot rely solely on files
.拖动的文件只能通过items
访问,因此您不能仅仅依赖于files
。
The major difference between dataTransfer.items
and dataTransfer.files
is that dataTransfer.items
also contains the subdirectories.之间的主要区别dataTransfer.items
和dataTransfer.files
是dataTransfer.items
还包含子目录。
This is important if you want to Drag&Drop subdirectories (eg to upload the entire directory tree, with all the files in it)如果您想拖放子目录(例如上传整个目录树,其中包含所有文件),这很重要
Below is an example how that would be accomplished:下面是一个如何实现的示例:
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 + "/");
}
});
}
}
Note: In the Chrome browser the dataTransfer.files
is deprecated and returns an empty collection.注意:在 Chrome 浏览器中dataTransfer.files
已被弃用并返回一个空集合。
I also didn't find any proper explanation of the difference between that two APIs.我也没有找到任何关于这两个 API 之间差异的正确解释。 But after my experiments on that API, I found out that the dataTransfer.items
is much newer and is defined to provide not just file drops but also drag and drop functionality(ie when you want to drag some item from your page to another part of your page).但是在我对该 API 的实验之后,我发现dataTransfer.items
更新得多,并且被定义为不仅提供文件放置,还提供拖放功能(即,当您想将某些项目从页面拖到另一部分时您的页面)。 And since I don't care about old IEs I'm only using dataTransfer.items
.因为我不关心旧的 IE,所以我只使用dataTransfer.items
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.