在前端开发中，我们经常需要处理用户上传的文件。有时候，用户可能会多次选择同一种类型的文件进行上传，这就需要我们来判断用户选择的文件是否为文件类型。
了解 input 元素
在 HTML 中，我们可以使用 input 元素来创建一个文件上传控件：
------ ----------- ---------
其中 type="file" 表示该元素为文件上传控件，而 multiple 则表示可以选择多个文件进行上传。
获取文件信息
当用户选择了文件后，我们可以使用 JavaScript 来获取文件的相关信息和内容。下面是一个简单的示例代码：
----- --------- - ---------------------------------------------
------------------------------------ -- -- -
----- ----- - ----------------
--- ---- - - -- - - ------------- ---- -
----------------- ----- -------------------
----------------- ----- ---------------- --------
----------------- ----- -------------------
----------------- --------- -------------------------------
-
---其中，通过 querySelector 方法获取到了 type 为 file 的 input 元素，然后给它添加了一个 change 事件监听器。当用户选择了文件后，事件监听器就会触发，并且可以通过 files 属性来获取用户选择的所有文件。接着，我们可以循环遍历用户选择的每一个文件，并输出它们的文件名、大小、类型和最后修改时间等信息。
判断文件类型
在获取到文件类型后，我们可以通过字符串比较来判断它是否为我们需要的类型。例如，如果我们需要判断是否为图片类型，可以使用以下代码：
-- -------------------------------- - -- ----- - ---- - -- ------ -
这里使用了 startsWith 方法来判断该文件类型是否以 image/ 开头，如果是，则说明该文件为图片类型。
总结
通过上面的介绍，我们可以学习到如何获取用户上传的文件信息，并根据文件类型做出相应的处理。当然，还有很多其他的方法可以用来获取文件信息和判断文件类型，具体可以根据实际情况选择适合自己的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24623