在前端开发中，文件上传是一个常见的需求。但是，有时用户上传了不符合要求的文件类型，可能会导致应用程序崩溃或功能失效。因此，在文件上传时，限制用户只能上传特定类型的文件非常重要。
本文将介绍如何使用HTML和JavaScript过滤输入类型为“file”的对话框，使用户只能选择指定的文件类型。
HTML文件输入控件
首先，我们需要一个HTML文件输入控件来让用户选择文件。以下是一个基本的HTML文件输入控件：
------ ----------- ----------------
请注意，我们为输入控件指定了ID “file-input”，以便稍后与它进行交互。
限制文件类型
我们需要使用JavaScript来过滤输入类型为“file”的对话框，使用户只能选择指定的文件类型。以下是一个示例代码片段：
----- --------- - --------------------------------------
------------------------------------ ------- -- -
----- ------------ - ----------------------
----- ------------ - -------------- ------------ -------------------
-- ------------------------------------------- -
--------------------
--------------- - --- -- ------
-
---上面代码中，我们首先获取了ID为“file-input”的输入控件。接下来，我们通过添加事件监听器来监听用户选择文件的更改。当“change”事件被触发时，我们检查所选文件类型是否在允许的文件类型列表中。如果不是，我们将显示一个警告消息，并清空文件选择。
请注意，allowedTypes数组包含了我们允许上传的文件类型。在这个示例中，我们只允许上传JPEG、PNG和PDF文件。你可以根据需要修改此数组。
文件类型过滤和显示
在本节中，我们将看到如何使用accept属性来限制文件选择对话框中显示的文件类型。
------ ----------- --------------- ------------------------------
上面代码中，我们添加了一个accept属性来指定允许的文件类型。在这个示例中，我们只允许选择以“.jpg”，“.jpeg”，“.png”或“.pdf”结束的文件。
结论
在本文中，我们已经学习了如何通过特定的文件类型过滤输入类型为“file”的对话框。我们使用JavaScript检查所选文件类型是否符合要求，并使用HTML的accept属性限制文件选择对话框中显示的文件类型。现在，你可以将这些技术应用于你自己的项目中，为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15558