在前面使用accept属性的回答的基础上，您可以使用File API来完成这个任务。如果您使用FileReader进行一些本地解析或数据处理，这也使您可以访问文件内容。

首先创建一个input元素，这里您可以将文件类型应用于accept属性，但对于示例，它将允许您选择所有文件类型。

<input type="file" name="upload" accept="*" multiple>

接下来，我们需要监听输入元素上的'change'事件。

var upload = document.querySelector('input[type="file"]');
upload.addEventListener('change', function() {});

在函数内部，您将能够访问输入的files对象。

var files = this.files

我们不能只是遍历对象，因为它不是数组，但是我们可以使用item()函数从列表中访问File对象。

for (var i = 0; i < files.length; i++) {
    var file = files.item(i);
}

现在我们有了File对象，我们可以访问它的name和type属性，并在这里进行文件检查。在这种情况下，我检查它是否是一个.txt文件，如果不是，就打印一条消息。您可以根据文件类型的正则表达式模式检查名称，或者根据其MIME类型检查类型。

if (!file.name.match(/.txt$/i) || file.type != 'text/plain') {
    console.log(file.name + ' is not a .txt file.');
}

var upload = document.querySelector('input[type="file"]'); 上传。addEventListener('change'， function() { Var files = this.files; For (var I = 0;I < files.length;我+ +){ Var文件= files.item(i); If (!file.name.match(/.txt$/i) ||文件。Type != 'text/plain') { Console.log (file.name + '不是.txt文件。'); ｝ ｝ })； <input type="file" name="upload" accept="*" multiple>

现代浏览器很好地支持文件API。通过将其与accept属性结合使用，您可以轻松地过滤本地用户在上传中可以选择的内容，并提供有用的反馈。如果您正在上传文件，您仍然应该在后端检查并验证文件类型。

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

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

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

输入标记有accept属性。然而，它在任何方面都不可靠。 浏览器很可能将其视为“建议”，这意味着用户将根据文件管理器的不同，有一个只显示所需类型的预选。他们仍然可以选择“所有文件”，上传任何他们想要的文件。

例如:

<form> <输入类型=“文件” 名称=“图片” id=“图片” 接受=“图像/gif， 图像/jpeg” /> </form>

在HTML5规范中阅读更多

请记住，它只是用于“帮助”用户找到正确的文件。 每个用户都可以向您的服务器发送任何请求。 您总是需要验证服务器端的所有内容。

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

Alternatively or additionally you can do something similar by checking the filename (value of the input field) with JavaScript, but this is nonsense because it provides no protection and also does not ease the selection for the user. It only potentially tricks a webmaster into thinking he/she is protected and opens a security hole. It can be a pain in the ass for users that have alternative file extensions (for example jpeg instead of jpg), uppercase, or no file extensions whatsoever (as is common on Linux systems).

您可以在文件选择框中使用“accept”属性作为过滤器。 使用“accept”可以帮助您根据“后缀”或“MIME类型”过滤输入文件

1.基于后缀的过滤: 这里的“accept”属性只允许选择扩展名为。jpeg的文件。

<input type="file" accept=".jpeg" />

2.基于“文件类型”的过滤器 这里的“accept”属性只允许你选择一个“image/jpeg”类型的文件。

<input type="file" accept="image/jpeg" />

重要提示:我们可以更改或删除文件的扩展名，而不改变模因类型。例如，可以有一个没有扩展名的文件，但该文件的类型可以是“image/jpeg”。所以这个文件不能通过accept=".jpeg"过滤器。但是它可以传递accept="image/jpeg"。

3.我们可以使用*来选择各种文件类型。例如下面的代码允许选择所有类型的图像。例如"image/png"或"image/jpeg"或... .所有这些都是允许的。

<input type="file" accept="image/*" /> 

4.我们可以在select属性中使用cama(，)作为“或操作符”。例如，允许所有类型的图像或pdf文件，我们可以使用以下代码:

<input type="file" accept="image/* , application/pdf" />

在前面使用accept属性的回答的基础上，您可以使用File API来完成这个任务。如果您使用FileReader进行一些本地解析或数据处理，这也使您可以访问文件内容。

首先创建一个input元素，这里您可以将文件类型应用于accept属性，但对于示例，它将允许您选择所有文件类型。

<input type="file" name="upload" accept="*" multiple>

接下来，我们需要监听输入元素上的'change'事件。

var upload = document.querySelector('input[type="file"]');
upload.addEventListener('change', function() {});

在函数内部，您将能够访问输入的files对象。

var files = this.files

我们不能只是遍历对象，因为它不是数组，但是我们可以使用item()函数从列表中访问File对象。

for (var i = 0; i < files.length; i++) {
    var file = files.item(i);
}

现在我们有了File对象，我们可以访问它的name和type属性，并在这里进行文件检查。在这种情况下，我检查它是否是一个.txt文件，如果不是，就打印一条消息。您可以根据文件类型的正则表达式模式检查名称，或者根据其MIME类型检查类型。

if (!file.name.match(/.txt$/i) || file.type != 'text/plain') {
    console.log(file.name + ' is not a .txt file.');
}

var upload = document.querySelector('input[type="file"]'); 上传。addEventListener('change'， function() { Var files = this.files; For (var I = 0;I < files.length;我+ +){ Var文件= files.item(i); If (!file.name.match(/.txt$/i) ||文件。Type != 'text/plain') { Console.log (file.name + '不是.txt文件。'); ｝ ｝ })； <input type="file" name="upload" accept="*" multiple>

现代浏览器很好地支持文件API。通过将其与accept属性结合使用，您可以轻松地过滤本地用户在上传中可以选择的内容，并提供有用的反馈。如果您正在上传文件，您仍然应该在后端检查并验证文件类型。

我的建议如下:

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