正文

轻松掌握：JavaScript中获取文件按钮选择文件名的5种方法

/0 浏览量
0713

在网页开发中，提供文件上传功能是常见的需求。JavaScript 提供了多种方式来获取用户通过文件按钮选择的文件名。以下将详细介绍五种常用的方法：

方法一：使用 input[type="file"] 的 files 属性

通过在 HTML 中创建一个文件输入元素，并使用 JavaScript 访问其 files 属性，可以直接获取到用户选择的文件列表。

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

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        console.log('文件名:', file.name);
    }
});

方法二：使用 input[type="file"] 的 value 属性

虽然这种方法不推荐使用，因为 value 属性在大多数浏览器中返回的是文件的完整路径，而不是文件名，但在某些老旧浏览器中，它可以用来获取文件名。

document.getElementById('fileInput').addEventListener('change', function(event) {
    const value = event.target.value;
    if (value) {
        const fileName = value.split('\\').pop(); // 在 Windows 中
        const fileName = value.split('/').pop(); // 在 Unix/Linux/macOS 中
        console.log('文件名:', fileName);
    }
});

方法三：使用 input[type="file"] 的 files 属性结合正则表达式

这种方法可以处理文件名中包含特殊字符的情况。

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const fileName = file.name.match(/[^\/\\]+(?=\.\w+$)/i)[0];
        console.log('文件名:', fileName);
    }
});

方法四：使用 FormData 对象

在发送文件到服务器时，可以使用 FormData 对象来获取文件名。

const formData = new FormData();
formData.append('file', document.getElementById('fileInput').files[0]);

// 假设有一个函数 sendFormData 用于发送 FormData 到服务器
sendFormData(formData);

方法五：使用 Web API 的 FileReader

FileReader 对象可以用来读取文件内容，同时可以获取文件名。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const content = e.target.result;
            console.log('文件名:', file.name);
            // 这里可以处理文件内容
        };
        reader.readAsText(file); // 或者使用其他 readAs 方法
    }
});

总结

选择哪种方法取决于具体的应用场景和兼容性要求。对于大多数现代浏览器，推荐使用第一种方法，因为它简单且直接。对于老旧浏览器，可能需要考虑第二种或第三种方法。在使用 FileReader 时，可以同时获取文件内容，这在处理文件时非常有用。

-- 展开阅读全文 --