javascript - 难以理解从文件控件中检索文件名的代码

Question

我在一个项目中有这段代码。我知道它从文件输入控件输出文件。问题是我不明白 var filename = e.target.files[0].name 的工作原理。如果可以，请帮助我。

$(document).ready(function() {
  $('input[type="file"]').change(function(e) {
    var fileName = e.target.files[0].name;
    $('#choose').html(fileName);
  });
});

Answer 1

将 e.target.files[0].name 行分成几部分:

• e 是作为参数传递给 jQuery 事件处理函数的 Event 对象。
• target 是包含对引发事件的元素的引用的属性
• files 是在 input type="file" 控件中选择的文件的集合。如果控件设置了 multiple 属性，则有可能选择了 1 个以上的文件，在这种情况下，您需要一个循环。
• [0] 仅从 files 集合中检索第一个选定的文件 - 其方式与按索引访问数组的方式相同。
• name 获取该文件的文件名。