Question

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

将让我们只选择jpg文件，但是弹出窗口中有一个下拉菜单，用于选择以下文件：所有文件（*。*）。如何阻止它显示 ONLY jpg文件，而不是具有选择该下拉列表中所有文件的能力？

Answer 1

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

试试这个

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

//This will match all image files

Answer 2

您还必须进行一些服务器端验证。

Answer 3

您可以使用以下HTML代码仅接受（.jpg）图像。

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

如你可以使用， <input type="file" accept="image/*"/>用于接受所有图片。

Answer 4

您无法阻止浏览器提供＆＃34;所有文件＆＃34;选项。

From MDN：

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

因此，您应确保通过适当的服务器端验证来备份accept属性。

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 5

就像这样

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

Answer 6

您好，你可以试试这个

<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" />

HTML - 如何只接受图像而不是所有文件

6 个答案: