当输入多个文件(重复)时,获取输入类型=“文件”值

阅读时长 3 分钟读完

在前端开发中,我们经常需要处理用户上传的文件。有时候,用户可能会多次选择同一种类型的文件进行上传,这就需要我们来判断用户选择的文件是否为文件类型。

了解 input 元素

在 HTML 中,我们可以使用 input 元素来创建一个文件上传控件:

其中 type="file" 表示该元素为文件上传控件,而 multiple 则表示可以选择多个文件进行上传。

获取文件信息

当用户选择了文件后,我们可以使用 JavaScript 来获取文件的相关信息和内容。下面是一个简单的示例代码:

-- -------------------- ---- -------
----- --------- - ---------------------------------------------
------------------------------------ -- -- -
  ----- ----- - ----------------
  --- ---- - - -- - - ------------- ---- -
    ----------------- ----- -------------------
    ----------------- ----- ---------------- --------
    ----------------- ----- -------------------
    ----------------- --------- -------------------------------
  -
---

其中,通过 querySelector 方法获取到了 type 为 file 的 input 元素,然后给它添加了一个 change 事件监听器。当用户选择了文件后,事件监听器就会触发,并且可以通过 files 属性来获取用户选择的所有文件。接着,我们可以循环遍历用户选择的每一个文件,并输出它们的文件名、大小、类型和最后修改时间等信息。

判断文件类型

在获取到文件类型后,我们可以通过字符串比较来判断它是否为我们需要的类型。例如,如果我们需要判断是否为图片类型,可以使用以下代码:

这里使用了 startsWith 方法来判断该文件类型是否以 image/ 开头,如果是,则说明该文件为图片类型。

总结

通过上面的介绍,我们可以学习到如何获取用户上传的文件信息,并根据文件类型做出相应的处理。当然,还有很多其他的方法可以用来获取文件信息和判断文件类型,具体可以根据实际情况选择适合自己的方法。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/24623

纠错
反馈