在前端开发中，经常使用文件输入控件用于上传文件。但是当我们需要获取上传的文件名时，该如何实现呢？本文将详细介绍如何通过 JavaScript 从文件输入控件中提取文件名，并提供示例代码供参考。
文件输入控件介绍
文件输入控件通常用于向服务器上传文件，它可以让用户选择本地计算机上的文件并将其上传到服务器。在 HTML 中，可以使用 <input> 标签来创建一个文件输入控件，例如：
<input type="file" id="fileInput">
这个标签会生成一个文件选择框，当用户点击该框时，操作系统的文件选择器会弹出，允许用户选择要上传的文件。完成选择后，用户需要点击“确定”按钮才能将文件上传至服务器。
提取文件名的方法
要从文件输入控件中提取文件名，可以通过以下步骤实现：
- 获取文件输入控件的引用。
- 添加 onchange 事件监听器，当用户选择文件后触发该事件。
- 在事件处理程序中，通过
files属性获取选中的文件列表，然后通过name属性获取文件名。
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
------ ----------- ---------------
--------
----- --------- - -------------------------------------
------------------------------------ ------- -- -
----- -------- - ----------------
----- -------- - -----------------
----------------------
---
---------
-------
-------在这个示例代码中，我们首先获取了文件输入控件的引用，然后添加了一个 onchange 事件监听器。当用户选择文件后，事件处理程序会调用 files 属性来获取选中的文件列表，然后使用 name 属性获取文件名，并将其输出到控制台上。
总结
在 JavaScript 中提取文件名是一个非常简单的任务，只需要获取文件输入控件的引用，然后在 onchange 事件处理程序中使用 files 和 name 属性即可。本文介绍了完整的实现过程，并提供了示例代码供参考。希望对前端开发者有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12789