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

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

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

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

好运！

是的，你说得对。这在HTML中是不可能的。用户将能够选择任何他/她想要的文件。

您可以编写一段JavaScript代码来避免根据扩展名提交文件。但请记住，这绝不能阻止恶意用户提交他/她真正想要的任何文件。

喜欢的东西:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

HTML代码:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

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

使用带有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版