HTML多文件上传与文件列表展示教程

本文详细介绍了如何使用HTML表单实现多文件上传功能，并提供文件列表展示的实用方法。核心在于利用HTML5的`<input type="file" multiple>`标签，结合JavaScript动态读取文件信息，构建直观的文件列表，提升用户体验。文章还深入探讨了如何通过FormData对象和XMLHttpRequest实现带进度条的异步上传，以及处理用户取消或重新选择文件的场景。通过本文，开发者可以掌握前端多文件上传的关键技术，并了解如何优化用户体验，例如显示上传进度，处理文件选择错误等，从而打造更完善的文件上传功能。

要实现HTML表单的多文件上传，核心是使用带有multiple属性的type="file"输入框并设置表单enctype为multipart/form-data，通过JavaScript监听change事件读取FileList对象并动态生成文件列表显示，利用FormData收集文件并通过XMLHttpRequest实现带进度条的异步上传，最终完成用户友好的多文件上传功能。

要实现HTML表单的多文件上传，核心在于HTML5的input标签的multiple属性。至于如何显示用户选择的文件列表，这通常需要借助JavaScript来读取文件信息，并动态地在页面上构建显示结构。这并非什么复杂的技术，更多是前端交互设计的一个常规环节，让用户能直观地看到自己即将上传的文件。

解决方案

实现多文件上传，首先你的表单需要一个正确的enctype属性，即multipart/form-data。这是告诉浏览器，表单里会有文件数据，需要特殊处理。然后，关键在于input标签，它的type必须是file，并且加上一个multiple属性。name属性也建议以数组形式命名，比如name="files[]"，这样后端接收时会更方便地处理为文件数组。

<form id="uploadForm" enctype="multipart/form-data" action="/upload-endpoint" method="post">
    <label for="fileInput" style="display: block; margin-bottom: 10px;">选择文件：</label>
    &lt;input type=&quot;file&quot; id=&quot;fileInput&quot; name=&quot;files[]&quot; multiple accept=&quot;.jpg,.png,.pdf,.doc,.docx&quot;&gt;
    <div id="fileListContainer" style="margin-top: 15px; border: 1px dashed #ccc; padding: 10px; min-height: 50px;">
        <!-- 文件列表将在这里动态显示 -->
        <p style="color: #666;">请选择文件...</p>
    </div>
    <button type="submit" style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">上传文件</button>
</form>

接下来是前端显示文件列表的JavaScript部分。当用户选择文件后，input元素的change事件会被触发。在这个事件处理器里，你可以通过event.target.files访问到一个FileList对象，它包含了所有被选择的文件。这个对象虽然看起来像数组，但它不是，不过你可以用for...of循环或者Array.from()将其转换为数组来遍历。

document.addEventListener('DOMContentLoaded', () => {
    const fileInput = document.getElementById('fileInput');
    const fileListContainer = document.getElementById('fileListContainer');

    fileInput.addEventListener('change', (event) => {
        fileListContainer.innerHTML = ''; // 清空之前的列表，方便重新选择

        const files = event.target.files;
        if (files.length === 0) {
            fileListContainer.innerHTML = '<p style="color: #666;">未选择任何文件。</p>';
            return;
        }

        const ul = document.createElement('ul');
        ul.style.listStyle = 'none';
        ul.style.padding = '0';
        ul.style.margin = '0';

        Array.from(files).forEach(file => { // 将FileList转换为数组，方便一些数组方法的使用
            const li = document.createElement('li');
            li.style.marginBottom = '8px';
            li.style.display = 'flex';
            li.style.alignItems = 'center';

            // 显示文件图标或预览
            let iconHtml = '<span style="margin-right: 8px; font-size: 1.2em;">?</span>'; // 默认文件图标
            if (file.type.startsWith('image/')) {
                const img = document.createElement('img');
                img.src = URL.createObjectURL(file); // 创建一个临时URL用于预览
                img.style.width = '40px';
                img.style.height = '40px';
                img.style.marginRight = '8px';
                img.style.borderRadius = '4px';
                img.style.objectFit = 'cover';
                img.onload = () => {
                    URL.revokeObjectURL(img.src); // 释放内存，当图片加载完成后
                };
                li.appendChild(img);
            } else if (file.type.startsWith('video/')) {
                iconHtml = '<span style="margin-right: 8px; font-size: 1.2em;">?</span>';
                li.innerHTML += iconHtml; // 仅显示图标，不直接播放视频预览
            } else if (file.type === 'application/pdf') {
                iconHtml = '<span style="margin-right: 8px; font-size: 1.2em;">PDF</span>';
                li.innerHTML += iconHtml;
            } else {
                li.innerHTML += iconHtml;
            }

            const fileNameSpan = document.createElement('span');
            fileNameSpan.textContent = `${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
            fileNameSpan.style.flexGrow = '1'; // 让文件名占据剩余空间
            li.appendChild(fileNameSpan);

            ul.appendChild(li);
        });
        fileListContainer.appendChild(ul);
    });
});

这里有个小细节，URL.createObjectURL(file)会生成一个临时的URL，指向浏览器内存中的文件数据。用完之后，最好调用URL.revokeObjectURL()来释放资源，尤其是在处理大量文件或者单页应用中，避免内存泄漏。我通常会在图片加载完成后就释放，因为浏览器已经把图片数据渲染出来了。

用户不小心选错了文件，或者想重新选择，该怎么办？

这种情况太常见了。用户可能选了一堆文件，然后发现里面有几个是错的，或者干脆想全部重新选。前端的处理逻辑，最直接的就是在input的change事件触发时，先清空之前显示的文件列表。你看我上面代码里有fileListContainer.innerHTML = '';这一行，就是这个作用。每次change，都把容器清空，然后根据event.target.files重新构建新的列表。

如果用户只是想移除列表中的某个文件，那就需要更复杂的交互了。你可以在每个文件项旁边加一个“删除”按钮。当用户点击这个按钮时，你需要从当前的FileList中“移除”这个文件。但问题是，FileList是一个只读对象，你不能直接增删改。所以，通常的做法是维护一个你自己的文件数组（比如selectedFiles = []），每次change事件发生时，把FileList里的文件复制到这个数组里。当用户点击“删除”时，你从你维护的数组中移除对应文件，然后更新input的files属性（这个需要高级技巧，或者更常见的做法是，在提交表单时，只提交你维护的selectedFiles数组里的文件，而不是input自带的files）。不过，对于一般场景，让用户重新选择，或者在后端处理多余文件，可能是更简单、更少出bug的方案。毕竟，前端模拟FileList的修改，复杂度和风险都挺高。

大文件上传时，如何让用户知道进度，避免漫长等待？

大文件上传最怕的就是用户看着页面发呆，不知道是卡住了还是在上传。所以，显示上传进度条几乎是标配。这通常需要借助XMLHttpRequest（XHR）或Fetch API来异步上传文件，而不是直接提交整个表单。

使用XHR的话，XMLHttpRequest.upload.onprogress事件是你的好朋友。这个事件会在上传过程中周期性触发，你可以在事件对象里拿到loaded（已上传字节数）和total（总字节数）。有了这两个值，计算百分比就轻而易举了。

// 假设你有一个上传按钮和进度条元素
const uploadButton = document.getElementById('uploadForm').querySelector('button[type="submit"]');
const progressBar = document.createElement('div');
progressBar.style.width = '0%';
progressBar.style.height = '20px';
progressBar.style.backgroundColor = '#28a745';
progressBar.style.marginTop = '10px';
progressBar.style.borderRadius = '3px';
progressBar.style.transition = 'width 0.3s ease-in-out';
const progressText = document.createElement('span');
progressText.textContent = '0%';
progressText.style.marginLeft = '10px';
progressText.style.fontWeight = 'bold';
progressText.style.color = '#333';

uploadButton.parentNode.insertBefore(progressBar, uploadButton.nextSibling);
progressBar.parentNode.insertBefore(progressText, progressBar.nextSibling);


uploadButton.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止表单默认提交
    const files = document.getElementById('fileInput').files;
    if (files.length === 0) {
        alert('请选择文件！');
        return;
    }

    const formData = new FormData();
    // 将所有选中的文件添加到FormData对象
    Array.from(files).forEach(file => {
        formData.append('files[]', file); // 这里的'files[]'要和后端接收的字段名一致
    });

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload-endpoint', true); // '/upload-endpoint'是你的后端上传接口

    xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
            const percent = (event.loaded / event.total) * 100;
            progressBar.style.width = percent + '%';
            progressText.textContent = `${percent.toFixed(2)}%`;
            // progressBar.setAttribute('aria-valuenow', percent.toFixed(2)); // 如果是带有aria属性的进度条
        }
    };

    xhr.onload = () => {
        if (xhr.status === 200) {
            console.log('上传成功！', xhr.responseText);
            alert('文件上传成功！');
            progressBar.style.width = '0%'; // 重置进度条
            progressText.textContent = '0%';
            // 清空文件列表或做其他处理
            document.getElementById('fileInput').value = ''; // 清空input的选择
            document.getElementById('fileListContainer').innerHTML = '<p style="color: #666;">请选择文件...</p>';
        } else {
            console.error('上传失败！', xhr.status, xhr.responseText);
            alert(`文件上传失败！状态码: ${xhr.status}`);
            progressBar.style.width = '0%'; // 重置进度条
            progressText.textContent = '0%';
        }
    };

今天关于《HTML多文件上传与文件列表展示教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！