现在可以将文件夹拖放到 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) 的新函数将拖放的对象视为 Entry (FileEntry 或 DirectoryEntry)。获得对 Entry 对象的访问权限后，您可以使用 FileSystem API 规范中引入的标准文件处理方法。例如，以下示例展示了如何通过检查 .isFile（或 .isDirectory）字段来检测拖放的对象是文件还是目录。

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