您可以在文件选择框中使用“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" />

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

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

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

您可以使用更改事件监视用户选择的内容，并在此时通知他们该文件不可接受。它没有限制实际显示的文件列表，但是除了不受支持的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

在前面使用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中是不可能的。用户将能够选择任何他/她想要的文件。

您可以编写一段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中的另一种选择)，但它不受适当支持。