js 获取文件名|极客笔记

js 获取文件名

在前端开发中，有时候我们需要获取文件的文件名，以便进行一些处理。在 JavaScript 中，我们可以通过一些方法来获取文件名。本文将详细介绍如何使用 JavaScript 来获取文件名。

通过 input 元素获取文件名

通常情况下，我们会通过 input 元素来上传文件。我们可以通过 input 元素的 files 属性来获取用户选择的文件列表，然后再通过 name 属性来获取文件名。以下是这个过程的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get File Name</title>
</head>
<body>
    <input type="file" id="fileInput">
    <script>
        const fileInput = document.getElementById('fileInput');
        fileInput.addEventListener('change', function() {
            const fileName = this.files[0].name;
            console.log(fileName);
        });
    </script>
</body>
</html>

在上面的代码中，我们创建了一个 input 元素，并为其添加了一个 id 为 fileInput。通过 JavaScript 我们获取了该元素，并对其添加了一个事件监听器，当用户选择文件后，会打印文件名到控制台。

通过 URL 对象获取文件名

除了通过 input 元素获取文件名外，我们也可以通过 URL 对象来获取文件名。URL 对象包含了很多有关 URL 地址的信息，其中也包括了文件名。以下是使用 URL 对象获取文件名的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get File Name</title>
</head>
<body>
    <script>
        const url = new URL('https://example.com/images/image.jpg');
        const fileName = url.pathname.split('/').pop();
        console.log(fileName);
    </script>
</body>
</html>

在上面的代码中，我们通过创建一个 URL 对象，并传入文件的 URL 地址。然后我们通过 pathname 属性来获取文件路径，再通过 split('/') 方法来将路径分割成数组，最后通过 pop() 方法获取数组的最后一个元素，即文件名。

通过字符串处理获取文件名

除了上述的方法外，我们也可以通过字符串处理来获取文件名。如果我们有文件的完整路径，我们可以通过处理字符串来获取文件名。以下是一个使用字符串处理的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get File Name</title>
</head>
<body>
    <script>
        const filePath = '/path/to/file/image.jpg';
        const fileName = filePath.split('/').pop();
        console.log(fileName);
    </script>
</body>
</html>

在上面的代码中，我们定义了一个文件路径 filePath，通过 split('/') 方法将路径分割成数组，并通过 pop() 方法获取数组的最后一个元素，即文件名。