如何检查浏览器是否支持webkitdirectory？

Question

我正在使用谷歌浏览器的文件夹上传功能，可以在这里找到更多信息: 如何在我的代码中使用谷歌浏览器11的上传文件夹功能？

我有一个按钮，当点击它时会触发一个输入框。 我的问题是如何检查浏览器是否支持webkitdirectory？ 这样我就可以隐藏我的按钮或提示用户使用chrome来使用这项服务。

<button>Upload Folder</button>
<input type="file" name="file[]" multiple webkitdirectory>

<script>
  $("button").click(function(e) {
    /* TODO: Detect webkitdirectory support */
    if(webkitdirectory)
      $('input').trigger('click');
    else
      alert('Use Chrome!');
  });
</script>

- Hafez Divandari

---

你可以尝试使用Modernizr。看起来他们在几年前就实现了这个检查 https://github.com/Modernizr/Modernizr/issues/674 如果不行的话，可以参考以下帖子 https://dev59.com/_GfWa4cB1Zd3GeqPks4_ - no1spirite

我使用了https://github.com/DamonOehlman/detect-browser，我不是创建者，但我喜欢它，因为它非常轻量级且恰好能满足你的需求。当与https://caniuse.com/#feat=input-file-directory结合使用时，可以使事情变得非常简单。 - Weeks

Answer 1

要查看是否支持 webkitdirectory，请检查输入元素中的属性：

webkitdirectorySupported(){
  return 'webkitdirectory' in document.createElement('input')
}

- Kim Nyholm

---

说实话，我不理解为什么会对这个答案进行负投票。现代化的方法似乎过于保守，鼓励使用特定于浏览器的前缀，尤其是因为我迄今为止从未遇到过除webkitdirectory以外的任何其他版本。无论如何，为了防御性编码，我只需添加对此答案的directory检查并将其保持为一行即可。更加简洁。 - Valeriu Paloş

Answer 2

根据Modernizer和this answer，我可以使用这个函数来检测是否支持目录选择：

function testFileInputDirectory() {
    var elem = document.createElement('input'),
    dir = 'directory',
    domPrefixes = [ "", "moz", "o", "ms", "webkit" ],
    prefix;
    
    elem.type = 'file';
    
    for (prefix in domPrefixes) {
      if (domPrefixes[prefix] + dir in elem) {
        return true;
      }
    }
    return false;
}

- Hafez Divandari