Javascript 如何判断是否有文件对象列表？

我现在正在做一些拖放的工作，作为规范化步骤，我想检查我拥有的对象列表是否真的是

File

s。似乎我通常从

文件列表

/

数据传输文件列表

，但我正在编写的函数可能最终接受来自非事件源的文件对象。因此，我考虑检查其中的单个项是否是

文件

或

数据传输项

的实例

然而，似乎我能从JS中得到的东西到处都是。包含

文件列表的
DataTransfer.files
；Chrome Devtools将其显示为
DataTransferItemList
（在控制台中）。列表中的项目应为“文件”，但Devtools将其显示为
DataTransferItem
。奇怪的是，
DataTransferItem
在Devtools控制台中是未定义的，并且肯定不适用于
instanceof
调用<代码>文件

，

文件列表

和

数据传输项列表

都在那里

我甚至还没有开始浏览其他浏览器

因此，我的问题分为两部分：

这些变化是怎么回事？MDN是否偏爱Gecko功能而不是W3C规范的解释？我是否在Devtools控制台中看到Webkit数据类型，但这些数据类型不一定会转换为JS中可访问的任何东西（即JS构造函数），我可以使用这些数据类型来

instanceof

考虑到所有这些变化，我如何判断某个东西是否是一个文件列表？我应该依赖于某种duck类型解决方案而不是

instanceof

---

所以我最终得到了这样的结果：

var knownFiles = [];

// If not already a list, make it a list
if (!files.length) {
    files = [files];
}

// Iterate manually to accommodate Array, FileList, DataTransferItemList
for (i = 0; i < files.length; i++) {
    file = files[i];

    if (Blob && file instanceof Blob) {
        // Safari, Firefox, IE land here
        knownFiles.push(file);
    } else if (file.webkitGetAsEntry) {
        // Chrome wraps Files in DataTransferItems
        knownFiles.push(file.webkitGetAsEntry());
    }
}

return knownFiles;

var knownFiles=[]；
//如果还没有列表，请将其列为列表
如果（！files.length）{
files=[files]；
}
//手动迭代以适应数组、文件列表、DataTransferItemList
对于（i=0；i

其中大部分来自浏览器（Chrome 41、Safari 8、Firefox 36和IE 11），但我也从这里得到了一些帮助：

---

很显然，Chrome是唯一一款不喜欢使用的浏览器，它在拖放事件的

数据传输
属性中返回的
文件列表和
文件周围添加了一个附加层。
它们的长度应该大于0，元素都是Blob的实例，因此，你的代码应该work@dandavis
instanceof Blob
适用于Firefox和Safari，但不适用于Chrome——Chrome将其视为
DataTransferItem
，有趣的是，
DataTransferItem
不暴露于JS代码。
DataTransferItem.getAsFile（）
。谢谢，Chrome。