要实现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()
来释放资源，尤其是在处理大量文件或者单页应用中，避免内存泄漏。我通常会在图片加载完成后就释放，因为浏览器已经把图片数据渲染出来了。
用户不小心选错了文件，或者想重新选择，该怎么办？
这种情况太常见了。用户可能选了一堆文件，然后发现里面有几个是错的，或者干脆想全部重新选。前端的处理逻辑，最直接的就是在
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%'; } };
以上就是HTML表单如何实现多文件上传？怎样显示上传的文件列表？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572233.html
微信扫一扫 
支付宝扫一扫 
