从 HTML 文件输入中删除“所有文件”选项答案

【问题标题】：Remove 'All Files' option from HTML file input从 HTML 文件输入中删除“所有文件”选项
【发布时间】：2014-07-29 15:38:42
【问题描述】：

我正在使用<input type="file"> 上传音频文件。

为此，我使用accept="audio/*"。因此，浏览器的文件选择对话框默认只显示音频文件。但是，该对话框中有一个我不想要的名为“所有文件”的选项。

（注意 - 也欢迎使用 Javascript、jQuery 和 AngularJs 中的任何解决方案）

如何禁用/删除“所有文件”选项？

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

我相信这超出了浏览器的范围，更多地取决于操作系统。然而，不管是什么情况，我不认为这是你应该搞砸的事情。

accept 没有最好的支持（尽管可能不是问题），但正如您在此处看到的：http://www.iana.org/assignments/media-types/media-types.xhtml#audio 所允许的类型的绝对数量可能超出了您的应用程序的范围。您应该做的最好的事情是执行服务器端验证，将accept 纯粹用作客户端指示符。

此外，虽然这是一个较旧的答案，但我认为它仍然相关且有效：File input 'accept' attribute - is it useful?

【讨论】：

所以底线是，我不能禁用“所有文件”？
是的。但更重要的答案是您不应该这样做。
绝对正确：这是一种可用性增强，不是验证，也不是安全功能。所以真的看不出有什么问题。

【解决方案2】：

现在可以使用文件系统访问 API 中的 window.showOpenFilePicker。唯一的问题是它自 2020 年 10 月以来仅在 Chrome 中可用。

  const files = await window.showOpenFilePicker({     
    
    types: [
          {
            description: 'Audio Files',
            accept: {
              'audio/*': ['.mp3','.wav'],//Extensions you want to allow
            },
          },
        ],
        excludeAcceptAllOption: true, // this hides all files option
        multiple: false,
});

API 规范：https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API

注意：这不在标准轨道上。

【讨论】：