在前端开发中，我们经常需要让用户通过文件上传来提交数据或者图片。而在这个过程中，如何获取用户选择文件的名称是一个很重要的问题。
在 HTML 中，我们可以使用 <input type="file" /> 元素来创建一个文件选择框。然后，当用户选择了一个文件之后，我们可以通过 JavaScript 来获取该文件的名称。
获取文件名
要获取文件名，我们需要监听文件选择框的 "change" 事件，并从事件对象中获取文件信息。下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ----------- -------------- --
--------
----- --------- - -------------------------------------
------------------------------------ ------- -- -
----- -------- - -------------------
-- ---------------- - -- -
----- -------- - -----------------
----------------------
-
---
---------在上面的代码中，我们首先获取到文件选择框的 DOM 对象，并添加了一个 "change" 事件监听器。当用户选择了一个文件之后，事件回调函数将会被触发。
在事件回调函数中，我们首先从事件对象中获取到用户选择的文件列表。由于文件选择框支持多选，所以这里返回的是一个文件列表。但是在大部分情况下，我们只需要获取第一个文件即可。
接下来，我们从第一个文件中获取 name 属性，这个属性就是文件的名称。最后，我们将文件名打印到控制台中以便调试和测试。
深入探讨
除了 name 属性之外，文件对象还有许多其他的属性和方法可以使用。下面是一些常见的用法：
size属性：获取文件大小，单位为字节。type属性：获取文件的 MIME 类型，例如 "image/png"。lastModified属性：获取文件最后修改时间戳，单位为毫秒。slice()方法：对文件进行分片，方便上传大文件。
如果你需要了解更多关于文件对象的知识，可以参考 MDN 文档。
总结
在本文中，我们学习了如何在用户选择文件时通过 <input type="file" /> 元素获取文件名。同时，我们也了解了文件对象的一些常见属性和方法，这些知识可以帮助我们更好地处理文件上传相关的问题。
上述代码只是一个简单的示例，实际开发中还需要考虑兼容性、错误处理等问题。但是通过学习本文，相信读者已经掌握了基本的思路和方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27185