HTML 如何限制input type=file只接受pdf和xls文件类型

在本文中，我们将介绍如何使用HTML限制标签只接受pdf和xls文件类型。

阅读更多：HTML 教程

文件选择限制

在Web开发中，有时候我们需要限制用户只能选择特定类型的文件进行上传。通过使用HTML的标签的accept属性，我们可以指定允许上传的文件类型。

<input type="file" accept=".pdf,.xls">

上述代码中，accept属性的值为”.pdf,.xls”，表示只接受扩展名为.pdf和.xls的文件。当用户在文件选择对话框中选择其他文件类型时，浏览器将无法上传。

MIME类型限制

除了限制文件扩展名，我们还可以使用MIME类型来限制文件选择。MIME类型是一种标准化的文件类型指示方式，它通过给文件分配唯一的标签来确定文件的类型。

<input type="file" accept="application/pdf,application/vnd.ms-excel">

上述代码中，我们通过设置accept属性的值为”application/pdf,application/vnd.ms-excel”，告诉浏览器只接受MIME类型为”application/pdf”和”application/vnd.ms-excel”的文件。

后端验证

HTML的限制只是对前端进行了简单的筛选，为了确保上传的文件类型符合要求，我们还需要在后端进行验证。

对于大多数开发语言，我们可以使用相关的库或函数来验证上传的文件类型是否为pdf或xls。以下是一些示例代码：

PHP：

$allowedTypes = ['application/pdf', 'application/vnd.ms-excel'];

if (in_array($_FILES['file']['type'], $allowedTypes)) {
    // 文件类型符合要求，进行后续操作
} else {
    // 文件类型不符合要求，给出相应提示
}

Node.js：

const allowedTypes = ['application/pdf', 'application/vnd.ms-excel'];

if (allowedTypes.includes(req.files.file.mimetype)) {
    // 文件类型符合要求，进行后续操作
} else {
    // 文件类型不符合要求，给出相应提示
}

通过在后端进行验证，我们可以确保上传的文件类型符合预期，增加网站的安全性和可靠性。