将输入 [type=file] 与 Filesystem API 集成

假设您有一款照片编辑应用，您希望用户能够拖入数百张照片并将其复制到您的应用中。那么，您该怎么做？

在最近的一篇博文中，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。