html多文件上传js如何获取文件名

在HTML中使用JavaScript获取多文件上传的文件名的方法包括：通过HTML的<input>标签、使用JavaScript的FileList对象、遍历文件列表。其中，使用FileList对象并遍历文件列表是最常见的方法。这是因为FileList对象可以包含用户选择的一个或多个文件，并且可以通过JavaScript轻松获取这些文件的详细信息。下面我们将详细介绍如何实现这一功能。

一、HTML 文件上传基础

要在HTML中实现文件上传，首先需要使用<input>标签，并将其type属性设置为file。为了允许用户选择多个文件，还需要添加multiple属性。

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

二、使用JavaScript获取文件名

当用户选择文件后，我们可以通过JavaScript获取这些文件的名称。需要绑定一个事件监听器来处理文件选择事件。

<input type="file" id="fileInput" multiple>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const fileList = event.target.files; // 获取FileList对象
    for (let i = 0; i < fileList.length; i++) {
        console.log(fileList[i].name); // 打印每个文件的名称
    }
});
</script>

三、详细解释和核心内容

1、获取`FileList`对象

在文件选择事件中，event.target.files返回一个FileList对象。这个对象包含了所有用户选择的文件。每个文件在FileList对象中都是一个File对象，包含文件的详细信息，如文件名、类型、大小等。

const fileList = event.target.files;

2、遍历`FileList`对象

使用for循环遍历FileList对象，以获取每个文件的名称。

for (let i = 0; i < fileList.length; i++) {
    console.log(fileList[i].name);
}

四、实际应用场景

1、显示文件名列表

在实际应用中，通常需要将文件名显示在网页上，而不仅仅是打印在控制台。可以动态创建HTML元素来显示文件名列表。

<input type="file" id="fileInput" multiple>
<ul id="fileList"></ul>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const fileList = event.target.files;
    const fileListElement = document.getElementById('fileList');
    fileListElement.innerHTML = ''; // 清空之前的列表
    for (let i = 0; i < fileList.length; i++) {
        const listItem = document.createElement('li');
        listItem.textContent = fileList[i].name;
        fileListElement.appendChild(listItem);
    }
});
</script>

2、文件上传和预览

在某些情况下，用户可能需要在上传之前预览文件内容（例如图片）。可以使用FileReader API来实现这一功能。

<input type="file" id="fileInput" multiple>
<div id="preview"></div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const fileList = event.target.files;
    const previewElement = document.getElementById('preview');
    previewElement.innerHTML = ''; // 清空之前的预览
    for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i];
        const reader = new FileReader();
        reader.onload = function(e) {
            const image = document.createElement('img');
            image.src = e.target.result;
            previewElement.appendChild(image);
        };
        reader.readAsDataURL(file);
    }
});
</script>

五、错误处理和用户体验优化

1、文件类型和大小验证

为了防止用户上传不符合要求的文件，可以在JavaScript中添加文件类型和大小验证。

document.getElementById('fileInput').addEventListener('change', function(event) {
    const fileList = event.target.files;
    const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
    const maxSize = 5 * 1024 * 1024; // 5MB
    const fileListElement = document.getElementById('fileList');
    fileListElement.innerHTML = '';
    for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i];
        if (!allowedTypes.includes(file.type)) {
            alert(`文件类型不支持：${file.name}`);
            continue;
        }
        if (file.size > maxSize) {
            alert(`文件过大：${file.name}`);
            continue;
        }
        const listItem = document.createElement('li');
        listItem.textContent = file.name;
        fileListElement.appendChild(listItem);
    }
});

2、上传进度显示

在上传大文件时，显示上传进度可以改善用户体验。可以使用XMLHttpRequest的upload事件来实现这一功能。

<input type="file" id="fileInput" multiple>
<progress id="uploadProgress" value="0" max="100"></progress>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const fileList = event.target.files;
    const progressElement = document.getElementById('uploadProgress');
    progressElement.value = 0;
    for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i];
        const xhr = new XMLHttpRequest();
        const formData = new FormData();
        formData.append('file', file);
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                progressElement.value = percentComplete;
            }
        });
        xhr.open('POST', '/upload-endpoint', true);
        xhr.send(formData);
    }
});
</script>

六、总结

通过以上步骤，我们可以在HTML中使用JavaScript轻松实现多文件上传并获取文件名。关键步骤包括：使用<input>标签、获取FileList对象、遍历文件列表。在实际应用中，还可以添加文件类型和大小验证、显示上传进度等功能，以提升用户体验。希望这些详细的介绍能帮助你更好地理解和实现多文件上传功能。