Question

我正在使用<input type="file" webkitdirectory>在Chrome上选择文件夹。虽然我知道此功能仅适用于Chrome，但我想在Firefox和IE等不支持它的浏览器上隐藏此按钮。

我发现了一条建议执行类似下面代码的帖子，但它在chrome和FF上都返回false。

$scope.isDirSupp = function() {
    var tmpInput = $('#bulkyFolder');
    if ('webkitdirectory' in tmpInput 
        || 'mozdirectory' in tmpInput 
        || 'odirectory' in tmpInput 
        || 'msdirectory' in tmpInput 
        || 'directory' in tmpInput) return true;

    return false;
}

HTML： <input type="file" webkitdirectory id="bulkyFolder" ng-show="isDirSupp">

在Chrome上显示此按钮并在Firefox和IE上隐藏它的最佳方法是什么？

Answer 1

您可以使用CSS仅在Chrome上显示输入元素。

#bulkyFolder {
  display: none;
}
#bulkyFolder:not(*:root) { /* Supports only WebKit browsers */
  display: block;
}

<input type="file" webkitdirectory id="bulkyFolder" ng-show="isDirSupp">

Answer 2

阅读How to detect Safari, Chrome, IE, Firefox and Opera browser?

它具有浏览器检测技术，演示和实现方式。如果它是特定的浏览器，他已解释将布尔变量设置为true。因此，您可以访问它并仅在特定浏览器上显示特定内容。

例如：var isChrome = !!window.chrome && !isOpera;

这将设置变量isChrome

现在，您可以在java脚本中动态创建内容，并在设置isChrome时显示。

在Firefox / IE上隐藏元素并仅在chrome上显示

2 个答案: