HTML使用时限制文件格式？

我想限制当用户单击 HTML 元素中的“浏览”按钮时可以从本机操作系统文件选择器中选择的文件类型。我有一种感觉，这是不可能的，但我想知道是否有解决方案。我只想只使用 HTML 和 JavaScript;请不要闪光灯。<input type="file">

分割线

网友回答：

严格来说，答案是否定的。开发人员无法使用前端验证（HTML/JavaScript）阻止用户上传任何类型或扩展名的文件。

但是，的accept属性仍然可以帮助在用户浏览器/操作系统提供的文件选择对话框中提供过滤器。例如<input type = "file">

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> 
<input type="file" accept=".xls,.xlsx" />

应提供一种过滤除.xls或.xlsx以外的文件的方法。尽管元素的 MDN 页面总是说它支持这一点，但令我惊讶的是，直到版本 42 才在 Firefox 中对我有用。这适用于IE 10 +，Edge和Chrome。input

因此，为了支持42岁以上的Firefox以及IE 10 +，Edge，Chrome和Opera，我想最好使用逗号分隔的MIME类型列表：

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />

[边缘（EdgeHTML）行为：文件类型筛选器下拉列表显示此处提到的文件类型，但不是下拉列表中的默认值。默认筛选器为。All files (*)

您还可以在 MIME 类型中使用星号。例如：

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types -->

W3C 建议作者在属性中同时指定 MIME 类型及其相应的扩展名。因此，最好的方法是：accept

<!-- Right approach: Use both file extensions and their corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />

JSFiddle 相同的：这里。

参考：MIME 类型列表

重要：使用该属性仅提供了一种在相关类型的文件中进行筛选的方法。浏览器仍然允许用户选择任何类型的文件。应该进行额外的（客户端）检查（使用JavaScript，一种方法是这样），并且肯定必须在服务器上验证文件类型，使用MIME类型的组合，同时使用文件扩展名及其二进制签名（ASP.NET，PHP，Ruby，Java）。您可能还希望参考这些表以了解文件类型及其幻数，以执行更可靠的服务器端验证。accept

以下是关于文件上传和安全性的三个很好的阅读。

编辑：也许使用二进制签名的文件类型验证也可以在客户端使用 JavaScript 使用 HTML5 File API 完成（而不仅仅是通过查看扩展名），但仍然必须在服务器上验证文件，因为恶意用户仍然能够通过发出自定义 HTTP 请求来上传文件。

分割线

网友回答：

输入标签有接受属性。但是，它在任何方面都不可靠。
浏览器很可能将其视为“建议”，这意味着用户也将根据文件管理器进行预选，仅显示所需的类型。他们仍然可以选择“所有文件”并上传他们想要的任何文件。

例如：

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

在 HTML5 规范中阅读更多内容

请记住，它仅用作用户查找正确文件的“帮助”。
每个用户都可以将他/她想要的任何请求发送到您的服务器。
您始终必须在服务器端验证所有内容。

所以答案是：不，你不能限制，但你可以设置一个预选，但你不能依赖它。

或者，或者另外，您可以通过使用 JavaScript 检查文件名（输入字段的值）来执行类似操作，但这是无稽之谈，因为它不提供任何保护，也不会简化用户的选择。它只会诱使网站管理员认为他/她受到保护并打开安全漏洞。对于具有替代文件扩展名（例如 jpeg 而不是 jpg）、大写或任何文件扩展名（在 Linux 系统上很常见）的用户来说，这可能是一个痛苦的屁股。

分割线

网友回答：

您可以使用该事件监视用户选择的内容，并在此时通知他们该文件不可接受。它不限制显示的实际文件列表，但它是除了支持不佳的属性之外，最接近客户端的文件列表。changeaccept

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/.([^.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

模板简介：该模板名称为【HTML使用时限制文件格式？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。

HTML使用 时限制文件格式？

网友回答：

网友回答：

网友回答：

HTML使用时限制文件格式？