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

How can I check if the browser support webkitdirectory?

本文关键字:浏览器 是否 支持 webkitdirectory 检查 何检查      更新时间:2023-09-26

我在项目中使用Google Chrome的文件夹上传功能,如下所述:如何使用Google Chrome 11';s上传文件夹功能在我自己的代码中?

我有一个按钮,当被点击时会触发一个输入字段。我的问题是如何检查浏览器是否支持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>

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

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

基于Modernizer和这个答案,我可以使用这个函数来检测是否支持目录选择:

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;
}