HTML 如何在用户通过选择文件时获取文件名

在本文中，我们将介绍如何使用HTML中的控件获取用户选择文件时的文件名，并且通过一些示例说明。

阅读更多：HTML 教程

通过JavaScript实现获取文件名

当用户在页面中选择一个文件后，我们可以使用JavaScript获取该文件的文件名。

首先，我们需要为元素添加一个事件监听器，以便在用户选择文件时触发相应的事件。以下是一个示例代码：

<input type="file" id="file-input" />

<script>
document.getElementById("file-input").addEventListener("change", function() {
  var files = this.files;
  var fileName = files[0].name;
  console.log(fileName);
});
</script>

在上面的代码中，我们通过getElementById获取到了元素，并为其添加了一个change事件监听器。当用户选择文件后，change事件将被触发，我们可以通过this.files来获取用户选择的文件列表，然后取出第一个文件的name属性作为文件名。

在上面的示例代码中，我们使用console.log输出文件名到浏览器的开发者工具控制台。你也可以将文件名显示在页面上的某个元素中，或者执行其他操作。

通过jQuery实现获取文件名

如果你在项目中使用了jQuery库，也可以通过它来实现获取文件名的功能。

首先，在你的HTML文件中引入jQuery库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后，你可以使用以下代码来获取文件名：

<input type="file" id="file-input" />

<script>
$("#file-input").on("change", function() {
  var files = this.files;
  var fileName = files[0].name;
  console.log(fileName);
});
</script>

在上面的代码中，我们使用了jQuery的.on方法来为元素添加change事件监听器，然后在事件处理函数中获取文件名。

处理多个文件

如果你允许用户选择多个文件，你可以对文件列表进行遍历，获取每个文件的文件名。

以下是一个处理多个文件的示例代码：

<input type="file" id="file-input" multiple />

<script>
document.getElementById("file-input").addEventListener("change", function() {
  var files = this.files;
  for (var i = 0; i < files.length; i++) {
    var fileName = files[i].name;
    console.log("文件名：" + fileName);
  }
});
</script>

在上面的代码中，我们给元素添加了multiple属性，以允许用户选择多个文件。然后在change事件处理函数中，我们使用一个for循环对文件列表进行遍历，获取每个文件的文件名并输出到控制台。