假设您有一款照片编辑应用,您希望用户能够拖入数百张照片并将其复制到您的应用中。那么,您该怎么做?
在最近的一篇博文中,Eiji Kitamura 重点介绍了拖放 API 中一个微妙但强大的新功能,即拖动文件夹并作为 HTML5 Filesystem API FileEntry
和 DirectoryEntry
对象进行检索的功能(通过访问 DataTransferItem 上的新方法 .webkitGetAsEntry()
来实现)。
.webkitGetAsEntry()
扩展程序最棒的是,它在导入文件和整个文件夹时非常优雅。通过拖放事件获取 FileEntry
或 DirectoryEntry
后,只需使用 Filesystem API 的 copyTo()
将其导入您的应用即可。
以下示例展示了如何将多个拖放文件夹复制到文件系统:
var fs = null; // Cache filesystem for later.
// Not shown: setup drag and drop event listeners.
function onDrop(e) {
e.preventDefault();
e.stopPropagation();
var items = e.dataTransfer.items;
for (var i = 0, item; item = items[i]; ++i) {
var entry = item.webkitGetAsEntry();
// Folder? Copy the DirectoryEntry over to our local filesystem.
if (entry.isDirectory) {
entry.copyTo(fs.root, null, function(copiedEntry) {
// ...
}, onError);
}
}
}
window.webkitRequestFileSystem(TEMPORARY, 1024 * 1204, function(fileSystem) {
fs = fileSystem;
}, function(e) {
console.log('Error', e);
});
非常好!同样,这得益于将 DnD 与 Filesystem API 调用集成在一起进行简化的集成。
更进一步,我们还可以将文件夹和/或文件拖放到常规 <input type="file">
上,然后以文件系统目录或文件条目的形式访问相应条目。这是通过 .webkitEntries
实现的:
<input type="file" multiple>
function onChange(e) {
e.stopPropagation();
e.preventDefault();
var entries = e.target.webkitEntries; // Get all dropped items as FS API entries.
[].forEach.call(entries, function(entry) {
// Copy the entry into our local filesystem.
entry.copyTo(fs.root, null, function(copiedEntry) {
...
}, onError);
});
}
document.querySelector('input[type="file"]').addEventListener('change', onChange);
我整理了一个图片库演示,来演示这些导入文件/文件夹的不同技术。
如需详细了解 HTML5 Filesystem API,请参阅探索 Filesystem API。