现在可以将文件夹拖放到 Chrome 上了

Eiji Kitamura
北村英二

随着 Web 应用的不断发展,您可能会发现让用户将文件从桌面拖放到浏览器上以便进行编辑、上传、分享等非常方便。但遗憾的是,我们还无法将文件夹拖放到网页中。幸运的是,从 Chrome 21 开始,此问题将会得到解决(已在 Chrome 开发者版中提供)。

通过拖放传递多个文件

我们来看一个现有拖放的代码示例。

<div id="dropzone"></div>
var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.files.length;
    for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
    }
};

在此示例中,您实际上可以将一个或多个文件从桌面拖放到浏览器,但当您尝试传递文件夹时,会发现它被拒绝或被视为 File 对象,从而导致失败。

如何处理放置的文件夹

Chrome 21 允许您将一个或多个文件夹拖放到浏览器窗口中。如需处理这些情况,您需要更改处理拖放对象的方式。

<div id="dropzone"></div>
var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
        ... // do whatever you want
    } else if (entry.isDirectory) {
        ... // do whatever you want
    }
    }
};

请注意,此处的一个巨大区别在于,您可以使用名为 getAsEntry (webkitGetAsEntry) 的新函数将丢弃的对象视为 EntryFileEntryDirectoryEntry)。获得对 Entry 对象的访问权限后,您可以使用 FileSystem API 规范中引入的标准文件处理方法。例如,此示例展示了如何通过检查 .isFile(或 .isDirectory)字段来检测放下的对象是文件还是目录。

如需详细了解 FileSystem API,请参阅探索 FileSystem API,详细了解新的拖放功能,请阅读此文档。当然,这些功能是开放标准,或者即将成为一项标准。