怎么用js获取file上传的文件名

使用JavaScript获取文件上传的文件名

使用JavaScript获取文件上传的文件名可以通过监听文件输入元素的变化事件、访问该元素的 files 属性，并从中提取文件名。监听文件输入元素的变化事件、访问该元素的 files 属性、提取文件名。以下是详细的描述。

监听文件输入元素的变化事件是实现这一目标的关键步骤。通过监听 change 事件，可以在用户选择文件后立即执行代码，从而获取文件名。下面将详细介绍如何使用JavaScript获取文件上传的文件名，并展示相关代码示例。

一、监听文件输入元素的变化事件

当用户通过文件输入元素选择文件时，会触发 change 事件。我们可以通过为文件输入元素添加事件监听器来捕捉这一事件，并在事件处理函数中执行相应的操作。

document.getElementById('fileInput').addEventListener('change', function(event) {
    // 获取文件列表
    var files = event.target.files;
    // 遍历文件列表并输出文件名
    for (var i = 0; i < files.length; i++) {
        console.log('文件名: ' + files[i].name);
    }
});

在上面的代码中，当用户选择文件后，文件输入元素的 change 事件会被捕捉到，并执行相应的事件处理函数。在事件处理函数中，我们通过 event.target.files 获取用户选择的文件列表，并通过遍历文件列表输出每个文件的文件名。

二、访问文件输入元素的 `files` 属性

文件输入元素的 files 属性是一个 FileList 对象，其中包含用户选择的所有文件。每个文件都是一个 File 对象，包含文件名、文件大小、文件类型等信息。我们可以通过访问 files 属性，获取用户选择的文件列表，并从中提取文件名。

var fileInput = document.getElementById('fileInput');
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
    console.log('文件名: ' + files[i].name);
}

在上面的代码中，我们通过 document.getElementById 获取文件输入元素，并通过 fileInput.files 获取用户选择的文件列表。然后，我们通过遍历文件列表，输出每个文件的文件名。

三、提取文件名

通过访问文件输入元素的 files 属性，我们可以获取用户选择的文件列表。每个文件都是一个 File 对象，其中的 name 属性包含文件名。我们可以通过遍历文件列表，提取每个文件的文件名，并进行相应的处理。

var fileInput = document.getElementById('fileInput');
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
    var fileName = files[i].name;
    console.log('文件名: ' + fileName);
    // 进行其他处理
}

在上面的代码中，我们通过 files[i].name 获取每个文件的文件名，并将其存储在 fileName 变量中。然后，我们可以对文件名进行进一步处理，例如显示在页面上、上传到服务器等。

四、完整示例代码

为了更好地展示如何使用JavaScript获取文件上传的文件名，下面提供一个完整的示例代码。该示例包括一个文件输入元素和一个用于显示文件名的文本区域。

<!DOCTYPE html>
<html>
<head>
    <title>获取文件上传的文件名</title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var fileInput = document.getElementById('fileInput');
            var fileNameDisplay = document.getElementById('fileNameDisplay');
            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);
                }
                fileNameDisplay.value = fileNames.join('n');
            });
        });
    </script>
</head>
<body>
    <h1>获取文件上传的文件名</h1>
    <input type="file" id="fileInput" multiple>
    <br><br>
    <textarea id="fileNameDisplay" rows="10" cols="50" readonly></textarea>
</body>
</html>

在上面的示例代码中，我们通过 document.addEventListener('DOMContentLoaded') 确保页面加载完成后再执行JavaScript代码。我们为文件输入元素添加了 change 事件监听器，在用户选择文件后获取文件列表，并将文件名显示在文本区域中。

通过这种方式，我们可以轻松地使用JavaScript获取文件上传的文件名，并根据需求进行相应的处理。

五、文件名的其他处理方式

除了简单地获取文件名并显示在页面上外，我们还可以对文件名进行其他处理，例如：

文件名校验：检查文件名是否符合指定的格式或规则。例如，限制文件名的长度、检查文件名是否包含特定字符等。

var fileName = files[i].name;
if (fileName.length > 50) {
    alert('文件名过长，请选择其他文件。');
    continue;
}

文件名去重：如果用户选择了多个文件，我们可以检查文件名是否重复，并提示用户选择不同的文件。

var fileNameSet = new Set();
for (var i = 0; i < files.length; i++) {
    var fileName = files[i].name;
    if (fileNameSet.has(fileName)) {
        alert('文件名重复，请选择不同的文件。');
        continue;
    }
    fileNameSet.add(fileName);
}

文件名格式化：对文件名进行格式化，例如将文件名转换为小写、去除文件名中的空格等。

var fileName = files[i].name.toLowerCase().replace(/s/g, '_');
console.log('格式化后的文件名: ' + fileName);

通过这些处理方式，我们可以更灵活地处理文件名，满足不同的需求。

六、JavaScript与服务器端的交互

在实际应用中，我们通常需要将用户选择的文件上传到服务器。可以使用 XMLHttpRequest 或 Fetch API 将文件上传到服务器，并在上传过程中处理文件名等信息。

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
    var files = event.target.files;
    var formData = new FormData();
    for (var i = 0; i < files.length; i++) {
        formData.append('file', files[i]);
    }
    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('上传成功:', data);
    })
    .catch(error => {
        console.error('上传失败:', error);
    });
});

在上面的代码中，我们使用 FormData 对象将用户选择的文件封装成表单数据，并通过 fetch 将表单数据上传到服务器。上传成功后，我们可以在服务器端处理文件名等信息。

七、结论

通过以上介绍，我们可以了解到使用JavaScript获取文件上传的文件名非常简单。监听文件输入元素的变化事件、访问该元素的 files 属性、提取文件名 是实现这一目标的关键步骤。通过这些操作，我们可以轻松地获取用户选择的文件名，并根据需求进行相应的处理。

无论是简单的文件名显示，还是复杂的文件名校验、去重、格式化等处理，都可以通过JavaScript实现。在实际应用中，我们还可以结合服务器端的交互，将用户选择的文件上传到服务器，进一步处理文件名等信息。

总之，使用JavaScript获取文件上传的文件名是一项常见且重要的操作，掌握这一技能可以帮助我们更好地处理文件上传相关的需求。

八、推荐项目管理系统

在开发和管理项目时，使用高效的项目管理系统可以大大提高团队的协作效率。这里推荐两个系统：研发项目管理系统PingCode 和 通用项目协作软件Worktile。

研发项目管理系统PingCode：PingCode 是一款专为研发团队设计的项目管理系统，支持需求管理、任务跟踪、缺陷管理等功能，帮助团队高效协作、提升研发效率。
通用项目协作软件Worktile：Worktile 是一款通用的项目协作软件，适用于各类团队和项目管理需求。支持任务管理、文件共享、团队沟通等功能，帮助团队更好地协作和管理项目。

通过使用这些项目管理系统，团队可以更好地组织和管理项目，提高工作效率，确保项目顺利完成。