我有一个元素可以像这样放置东西
var div = document.createElement("div");
div.addEventListener("drop", (e)=>{
e.preventDefault();
if (!(("dataTransfer" in e) && ("files" in e.dataTransfer))) return;
for (var i = 0; i < e.dataTransfer.files.length; i++) {
var file = e.dataTransfer.files[i];
// magical check whether the file is a folder?
upload_file(file);
}
});
问题是,文件夹在FileList对象中的显示方式完全相同,直到您尝试使用FileReader读取它们之前,它们似乎与文件是无法区分的。
它们的大小似乎恰好是该文件来自的任何驱动器的群集大小,它们没有类型,但对于任何不常见的文件扩展名都适用。当您尝试使用FileReader读取它们时,甚至根本不会引发onload。
我可以尝试使用某种超时机制进行测试读取,以检测其不是文件,但这似乎是一种肮脏的方法,势必会在以后的任何浏览器更新中导致错误。
还有其他方法可以确定提供的文件实际上不是文件吗?
答案 0 :(得分:1)
在广泛的搜索范围内,我发现的唯一真实选择是使用由edge,chrome和ff支持的实验功能
对于我的实现,在呈现页面之前,我进行此测试以检查是否完全允许放置:
browser_support_drop() {
if (typeof DragEvent !== "function") return false;
if (!("dataTransfer" in DragEvent.prototype)) return false;
if (typeof DataTransferItem !== "function") return false;
if (!("webkitGetAsEntry" in DataTransferItem.prototype) && !("getAsEntry" in DataTransferItem.prototype)) return false;
return true;
}
,然后在放置处理程序中(如果适用)
handle_drop(e) {
var items = [];
for (var i = 0; i < e.dataTransfer.items.length; i++) {
var item = e.dataTransfer.items[i];
if (item.kind !== "file") continue;
var entry = "getAsEntry" in DataTransferItem.prototype ? item.getAsEntry() : item.webkitGetAsEntry();
if (entry.isDirectory) continue;
items.push(item.getAsFile());
}
this.handle_files_added(items);
}