背景
在Web开发中，经常需要用户上传文件。HTML提供了一个<input type="file">元素用于允许用户选择文件并将其上传到服务器。如果需要允许用户选择多个文件，则可以使用multiple属性。
<input type="file" multiple>
在处理上传时，通常需要知道用户选择了多少个文件以及它们的文件名。
解决方法
要获取带有multiple属性的文件输入元素中的文件数量和文件名，可以使用FileList对象以及File对象的属性。FileList是一个类似数组的对象，它包含用户选择的所有文件。可以通过FileList.length属性获取文件数量，并通过循环遍历每个File对象来获取其文件名。
以下代码演示了如何获取文件数量和文件名：
const inputElement = document.querySelector('input[type="file"]');
inputElement.addEventListener('change', function() {
const files = this.files;
console.log(`选择了${files.length}个文件`);
for (let i = 0; i < files.length; i++) {
console.log(`文件${i+1}的名称是${files[i].name}`);
}
});上述代码监听了文件输入元素的change事件，当用户选择文件后，会打印出文件数量和每个文件的名称。这里使用了模板字符串（template string）来构建输出语句。
需要注意的是，File对象还有其他属性可以获取，例如size（文件大小）和type（文件类型）。详情请参考MDN文档。
指导意义
通过学习本文所述的方法，我们可以轻松地获取带有multiple属性的文件输入元素中的文件数量和文件名，从而方便地进行文件上传处理。
除此之外，我们还可以通过学习FileList、File对象的相关知识，深入了解JavaScript中操作文件的方法和技巧，并应用到其他领域中，例如使用fetch API实现文件上传等。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
------ ----------- ---------
--------
----- ------------ - ---------------------------------------------
--------------------------------------- ---------- -
----- ----- - -----------
-------------------------------------
--- ---- - - -- - - ------------- ---- -
--------------------------------------------
-
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26496