如何从文件输入对话框中删除所有文件选项？答案

【问题标题】：How to remove All Files option from file input dialog?如何从文件输入对话框中删除所有文件选项？
【发布时间】：2020-05-22 13:43:15
【问题描述】：

<input type="file" accept=".jpg">

这使文件选择对话框默认为仅允许 JPG 文件，但是还有一个用于选择所有文件的下拉菜单：All Files (*.*)。我怎样才能使其仅允许 JPG 文件，而不能在下拉列表中选择所有文件？

【问题讨论】：

How to allow <input type="file"> to accept only image files的可能重复
再次显示所有文件
另见：Remove 'All Files' option from HTML file input

标签： html

【解决方案1】：

您无法阻止浏览器提供“所有文件”选项。

From MDN:

accept 属性不验证所选文件的类型； 它只是为浏览器提供提示，引导用户选择正确的文件类型。用户仍然可以（在大多数情况下）在文件选择器中切换一个选项，以便覆盖它并选择他们想要的任何文件，然后选择不正确的文件类型。

因此，您应该确保接受属性得到适当的服务器端验证的支持。

但是，您可以将事件侦听器附加到文件输入，如果选择了无效文件，您可以拒绝它 - 并显示相应的错误消息。这可作为客户端的附加验证。

请注意，这不能替代服务器端的文件验证。

您可以在 sn-p 中看到此类事件处理程序的示例：

var fileInput = document.getElementById("fileinput");
var allowedExtension = ".jpg";

fileInput.addEventListener("change", function() {
  // Check that the file extension is supported.
  // If not, clear the input.
  var hasInvalidFiles = false;
  for (var i = 0; i < this.files.length; i++) {
    var file = this.files[i];
    
    if (!file.name.endsWith(allowedExtension)) {
      hasInvalidFiles = true;
    }
  }
  
  if(hasInvalidFiles) {
    fileInput.value = ""; 
    alert("Unsupported file selected.");
  }
});

&lt;input type="file" accept=".jpg" id="fileinput"&gt;

另外，如果您想允许所有图像，您可以指定accept="image/*" 作为属性。它将允许所有图像类型，并且在移动设备的情况下也允许用户拍照。

【讨论】：

【解决方案2】：

禁用选择所有文件的功能已经超出了浏览器的范围，但是仍然有Chrome 16+、mSafari 6+、mFirefox 9+、mIE 10+、mOpera 11+等浏览器接受它

试试这个

<input type="file" accept="image/*">

//This will match all image files

【讨论】：

不！在选择文件弹出窗口时仍显示 所有文件。无论如何谢谢:)

【解决方案3】：

就这样

<input type="file" accept="image/jpeg" />

【讨论】：

【解决方案4】：

你好，你可以试试这个

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

或者简单地说：

<input type="file" name="myImage" accept="image/*" />



<input type="file" accept=".png, .jpg, .jpeg" />

【讨论】：