JavaScript选择一个目录[重复]

Question

可能重复：
Directory Chooser in HTML page
How do I use Google Chrome 11's Upload Folder feature in my own code?

我希望用户单击一个按钮，然后有一个文件选择对话框，但用户只能选择一个目录，选择后，我需要将目录路径作为字符串。

我查看了 HTML5 File API，但不知道如何限制只能选择目录，也没有看到文件路径的属性。

只需要支持Chrome

Answer 1

突破！这些使用了一些实验性功能，我不知道这是否真的有效。首先，让我们通过下载一个虚拟文件来找出下载目录的路径：

chrome.experimental.downloads.download({url:"data:text/plain,",filename:"~dummy.tmp"},
  function (downloadId, error) {
    if (error) { /* do stuff */ }

    // get the DownloadItem object
    chrome.experimental.downloads.search({downloadId: downloadId}, function(items) {

      // this is the absolute filesystem location of where it was downloaded!
      var filename = items[0].filename;

      // if we remove dummy.tmp from the end we have the downloads directory!
      // also in case it's windows replace backslashes with forward slashes.
      var downloads_directory = filename.replace(/~dummy.tmp$/i,"").replace(/\\/g,"/");
    });
});

在此之后，我预计有两种方法可以完成您的扩展：

1. （稍微难一点）现在我们有了下载目录，让我们访问 file:/// url。将"file://*" 权限添加到您的清单文件。您需要告诉您的用户导航到chrome://extensions，找到您的扩展程序，然后勾选旁边的“允许访问文件：// URL”。您可以通过isAllowedFileSchemeAccess 检查以确保用户已完成此操作。

   根据您的操作系统，前往file:///home/ 或file:///C:/ 尝试一下。它应该显示您计算机中文件的目录。我相信可以使用 XMLHttpRequest 来获取这些文件的 HTML（提示：use xhr.responseType = "document"），您可以对其进行解析以构建自己的用户界面来选择文件夹！ （要添加文件夹，只需将文件下载到您要添加的路径即可。）

2. 您也可以简单地调用 chrome.experimental.downloads.download 和 saveAs: true 让用户将临时文件下载到他们想要保存到的文件夹中。然后，去掉最后的文件名，去掉开头的下载路径，得到一个相对路径，以后可以保存文件！

我很高兴看到您的扩展结果如何。祝你好运！