HTML表单如何实现多文件上传？怎样显示上传的文件列表？-html教程-PHP中文网

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

HTML表单如何实现多文件上传？怎样显示上传的文件列表？

要实现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>
    <input type="file" id="fileInput" name="files[]" multiple accept=".jpg,.png,.pdf,.doc,.docx">
    <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()

登录后复制

来释放资源，尤其是在处理大量文件或者单页应用中，避免内存泄漏。我通常会在图片加载完成后就释放，因为浏览器已经把图片数据渲染出来了。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

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

这种情况太常见了。用户可能选了一堆文件，然后发现里面有几个是错的，或者干脆想全部重新选。前端的处理逻辑，最直接的就是在

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表单如何实现多文件上传？怎样显示上传的文件列表？的详细内容，更多请关注php中文网其它相关文章！