正文

如何通过JavaScript在HTML多文件上传中获取文件名

/0 浏览量
0820

在HTML中实现多文件上传，并使用JavaScript获取文件名是一个常见的任务。以下是一篇详细的指南，介绍了如何通过JavaScript在HTML多文件上传中获取文件名。

前提条件

在开始之前，请确保您的HTML页面中有一个多文件上传的<input>元素。以下是一个简单的示例：

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

multiple属性允许用户选择多个文件。

获取文件名

当用户选择文件后，可以通过监听input元素的change事件来获取文件名。以下是一个JavaScript函数的示例，它可以在文件被选择时获取并显示文件名：

document.getElementById('fileInput').addEventListener('change', function(event) {
    var files = event.target.files; // 获取所有选中的文件
    var fileNames = []; // 创建一个数组来存储文件名

    for (var i = 0; i < files.length; i++) {
        // 将文件名添加到数组中
        fileNames.push(files[i].name);
    }

    // 打印或显示文件名
    console.log(fileNames.join(', '));
    // 或者将文件名显示在页面上
    document.getElementById('fileList').innerText = fileNames.join(', ');
});

这段代码首先为fileInput元素添加了一个change事件监听器。当文件被选择时，它获取所有选中的文件，并将它们的名称添加到一个数组中。最后，它将文件名打印到控制台，并显示在页面的fileList元素中。

HTML示例

以下是一个HTML示例，展示了如何结合上述JavaScript代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多文件上传</title>
</head>
<body>
    <input type="file" id="fileInput" multiple>
    <div id="fileList"></div>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            var files = event.target.files;
            var fileNames = [];

            for (var i = 0; i < files.length; i++) {
                fileNames.push(files[i].name);
            }

            console.log(fileNames.join(', '));
            document.getElementById('fileList').innerText = fileNames.join(', ');
        });
    </script>
</body>
</html>

在这个例子中，当用户选择文件时，文件名将显示在页面上的fileList元素中。

总结

通过使用JavaScript的change事件和files属性，您可以在HTML多文件上传中轻松获取文件名。以上示例展示了如何实现这一功能，并提供了一个完整的HTML示例，您可以根据需要对其进行修改和扩展。

-- 展开阅读全文 --