随着 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,详细了解新的拖放功能,请阅读此文档。当然,这些功能是开放标准,或者即将成为一项标准。