要实现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[]"，这样后端接收时会更方便地处理为文件数组。
接下来是前端显示文件列表的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 = '未选择任何文件。
';
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 = '?'; // 默认文件图标
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 = '?';
li.innerHTML += iconHtml; // 仅显示图标，不直接播放视频预览
} else if (file.type === 'application/pdf') {
iconHtml = 'PDF';
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()来释放资源，尤其是在处理大量文件或者单页应用中，避免内存泄漏。我通常会在图片加载完成后就释放，因为浏览器已经把图片数据渲染出来了。
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
用户不小心选错了文件，或者想重新选择，该怎么办？
这种情况太常见了。用户可能选了一堆文件，然后发现里面有几个是错的，或者干脆想全部重新选。前端的处理逻辑，最直接的就是在
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 = '请选择文件...
';
} else {
console.error('上传失败！', xhr.status, xhr.responseText);
alert(`文件上传失败！状态码: ${xhr.status}`);
progressBar.style.width = '0%'; // 重置进度条
progressText.textContent = '0%';
}
}; 
