验证文件输入类型的最简单方法

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

我最近一直在开发一个表单，有一天接到一个任务，需要给输入框添加类型验证。我最初的想法是在文件上传后检查文件类型，然后根据验证结果将文件存储到应用的列表中或删除。我的想法是建立一个文件扩展名白名单，只允许用户上传白名单上的文件，以确保系统中不会引入任何不安全的内容。

为了确保涵盖所有必要的扩展名，我最终检查了输入字段支持的文件类型。然后我找到了答案——accept文件输入框本身就带有一个属性。多亏了这个属性，用户体验非常棒——未在accept属性中列出的文件会显示为灰色，用户无法选择。这避免了混淆，提供了专门的错误信息，并清晰地向用户展示了他们可以向表单添加哪些内容，以及哪些内容不能添加。

我建议您查看文档了解详情，我只想强调一下，此属性可以接受文件扩展名和唯一的文件类型标识符。请参见以下示例（摘自此处）。

• accept="image/png" 或者 accept=".png" ——接受PNG文件。
• accept="image/png, image/jpeg" 或者 accept=".png, .jpg, .jpeg" ——接受PNG或JPEG文件。
• accept="image/*" — 接受任何 image/* MIME 类型的文件。（许多移动设备还允许用户在启用此功能时使用摄像头拍照。）
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — 接受任何闻起来像微软 Word 文档的东西。

使用accept属性而不是手动检查每个文件再添加到列表中，大大提高了我的工作效率。我无需在每次添加错误文件时抛出错误并向用户解释下一步该怎么做。然而，我希望确保表单中绝对不会出现上传错误文件的情况。虽然accept属性确实不允许用户选择我未指定类型的文件，但你也知道……表单总是有可能被外部脚本篡改。因此，我决定在将文件添加到列表之前添加一个步骤，编写了一个函数来检查所选文件类型是否包含在我应用程序中的扩展名白名单中。如果不在白名单中，则不执行任何操作（无需向用户显示错误，因为这种情况仅在表单被篡改时才会出现）。这样，应用程序就安全了。