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

var file = document.getElementById('someId'); 文件。Onchange =函数(e) { Var ext = this.value.match(/\.([^\.]+)$/)[1]; Switch (ext) { 例“jpg”: 例“bmp”: 例“png”: 气管无名动脉瘘管的情况下“”: 警报(允许的); 打破; 默认值: 警报(“不允许”); 这一点。Value = "; ｝ }; <input type="file" id="someId" />

JSFiddle

我知道有点晚了。

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

使用带有accept属性的输入标记

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

点击这里查看最新的浏览器兼容性表

现场演示在这里

如果只选择图像文件，可以使用accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

现场演示在这里

只有gif, jpg和png将显示，屏幕截图从Chrome 44版

你实际上可以用javascript来做，但记住js是客户端，所以你实际上是“警告用户”他们可以上传什么类型的文件，如果你想避免(限制或限制如你所说)某些类型的文件，你必须在服务器端做它。

如果您想开始服务器端验证，请查看这个基本的tut。对于整个教程，请访问这个页面。

好运！

严格地说，答案是否定的。开发人员不能阻止用户使用前端验证(HTML/JavaScript)上传任何类型或扩展名的文件。但是，<input type = "file">的accept属性可以帮助在用户的浏览器/操作系统提供的文件选择对话框中提供一个过滤器。例如,

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

应该提供一种过滤除.xls或.xlsx以外的文件的方法。虽然输入元素的MDN页面总是说它支持这个功能，但令我惊讶的是，在Firefox 42版之前，这个功能并不适用于我。这适用于IE 10+， Edge和Chrome。

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

<！——(IE 10+， Edge (EdgeHTML)， Edge (Chromium)， Chrome, Firefox)——> < input type = "文件" 接受盾= "应用程序/ vnd.openxmlformats-officedocument.spreadsheetml.sheet、应用程序/。ms excel " / >

[Edge (EdgeHTML)行为:文件类型过滤器下拉菜单显示了这里提到的文件类型，但不是默认的下拉菜单。默认过滤器为“所有文件(*)”。

您还可以在mime类型中使用星号。例如:

<input type="file" accept="image/*" /> <!——所有图像类型——> <input type="file" accept="audio/*" /> <!——所有音频类型——> <input type="file" accept="video/*" /> <!——所有视频类型——>

W3C建议作者在accept属性中指定mime类型及其相应的扩展。所以，最好的方法是:

<！正确的方法:同时使用文件扩展名和相应的mime类型。--> <！——(IE 10+， Edge (EdgeHTML)， Edge (Chromium)， Chrome, Firefox)——> < input type = "文件" 接受= " xls, .xlsx、应用程序/ vnd.openxmlformats-officedocument.spreadsheetml.sheet盾应用程序/。ms excel " / >

JSFiddle是一样的:这里。

Reference: List of MIME-types IMPORTANT: Using the accept attribute only provides a way of filtering in the files of types that are of interest. Browsers still allow users to choose files of any type. Additional (client-side) checks should be done (using JavaScript, one way would be this), and definitely file types MUST be verified on the server, using a combination of MIME-type using both the file extension and its binary signature (ASP.NET, PHP, Ruby, Java). You might also want to refer to these tables for file types and their magic numbers, to perform a more robust server-side verification. Here are three good reads on file-uploads and security.

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

我的建议如下:

If you have to make user select any of image files by default, the use accept="image/*" <input type="file" accept="image/*" /> if you want to restrict to specific image types then use accept="image/bmp, image/jpeg, image/png" <input type="file" accept="image/bmp, image/jpeg, image/png" /> if you want to restrict to specific types then use accept=".bmp, .doc, .pdf" <input type="file" accept=".bmp, .doc, .pdf" /> You cannot restrict user to change file filer to all files, so always validate file type in script and server