我的建议如下:

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

正如在前面的回答中提到的，我们不能限制用户仅为给定的文件格式选择文件。但是在html中的file属性上使用accept标记非常方便。

至于验证，我们必须在服务器端进行。我们也可以在js的客户端这样做，但这不是一个万无一失的解决方案。我们必须在服务器端进行验证。

对于这些需求，我真的更喜欢struts2 Java web应用程序开发框架。通过其内置的文件上传功能，将文件上传到基于struts2的web应用程序中是小菜一碟。只要提到我们希望在应用程序中接受的文件格式，其余的都由框架本身的核心处理。您可以在struts的官方网站上查看它。

我知道有点晚了。

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;
}

从技术上讲，您可以在input元素上指定accept属性(html5中的另一种选择)，但它不受适当支持。

我的建议如下:

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

严格地说，答案是否定的。开发人员不能阻止用户使用前端验证(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请求上传文件。