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

Question

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

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

Answer 1

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

来自 MDN：

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

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

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

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

您可以在代码段中看到此类事件处理程序的示例：

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.");
  }
});

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

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

Answer 2

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

试试这个

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

//This will match all image files