文件类型有限的HTML文件输入字段?

最好的方法是在后端处理这个问题。根据您希望允许的类型和后端技术,您可以找到各种方法来实现这一点。

您也可以在JavaScript中执行此操作,但您将受到更多限制,这可能会导致跨浏览器出现问题:

if((document.form1.upload.value.lastIndexOf(".jpg")==-1) {
   alert("Please upload only .jpg extention file");
   return false;
}

( via )

如果使用jquery,请签出此问题: How to have jQuery restrict file types on upload?

您也可以使用jquery验证插件。

$("#myform").validate({
  rules: {
    field: {
      required: true,
      accept: "xls|csv"
    }
  }
});

( via )

根据 this answer (引证):

在中引入了accept属性 RFC 1867 ,意图使 基于mime类型的文件类型筛选 对于文件选择控件。但大多数, 如果不是所有浏览器都使用 这个属性。

我猜你仍然需要处理服务器上脚本中的“错误”文件…即使您找到了某种javascript检查方法(可能有——请参阅其他答案),您也必须检查服务器上的数据,因为JS可能被禁用,并且表单发布是伪造的……

无法限制类型x-browser。

使用javascript,您可以通过检查文件名文本框或可能使用的提交按钮中更改的内容来完成此操作。

此站点有一个这样做的示例: http://www.codestore.net/store.nsf/unid/DOMM-4Q8H9E

如果您真的很谨慎,那么您也应该在后端进行验证,因为我可以在任何文件的末尾放一个.jpg,它将通过JavaScript检查。

好吧,您可以使用javascript来实现这一点,实际上,如果您使用jquery,几乎所有的文件上传插件都可以选择处理文件类型限制。 只有HTML做不到。

但是,只有客户端过滤并不意味着任何类型的文件都不能上载到您的服务器。实际上,攻击者可以上传任何类型的文件,因为避免javascript“屏蔽”很简单。必须始终进行服务器端验证。

不幸的是,似乎没有任何合适的方法来做到这一点。限制标记中的文件类型的好处是浏览器将过滤掉不有用的文件。今天没有办法做到这一点。:(

如果您使用的是jquery,请看一下这个插件- https://github.com/ajaxray/bootstrap-file-field

使用这个小插件,您可以使用简单的数据属性或JS设置设置各种限制,包括文件类型。
E,G, data-file-types="image/jpeg,image/png" 将限制选择除JPG和PNG图像以外的文件类型。
btw,将以引导按钮的形式显示文件输入字段,并漂亮地显示选定的文件名(或选择错误)。