JS实现多文件上传需用input的multiple属性获取FileList，通过FormData打包文件并用Fetch或XMLHttpRequest发送，结合进度监听、分片上传与Web Worker优化体验。
JS实现多文件上传，核心在于利用HTML的
input type="file" multiple属性获取文件列表，然后通过
FormData对象将这些文件打包，最后使用
Fetch API或
XMLHttpRequest发送到服务器。这套流程既直接又高效，是前端处理文件上传的通用方案。
解决方案
说起来，这事儿真不复杂。你首先得有个HTML
<input type="file" multiple>。那个
multiple属性是关键，它让用户能一次性选好几个文件。当用户选完文件后，这些文件会变成一个
FileList对象，你可以通过
event.target.files或者DOM元素的
files属性拿到它。
拿到文件后，下一步就是打包。我们通常用
FormData。这玩意儿就像一个特殊的包裹，你可以往里面塞各种数据，包括文件。它会自动帮你处理好
Content-Type为
multipart/form-data的请求头，省去了很多麻烦。
// 假设HTML中有一个 <input type="file" id="fileInput" multiple>
const fileInput = document.getElementById('fileInput');
const uploadUrl = '/api/upload-multiple-files'; // 你的后端上传接口
fileInput.addEventListener('change', (event) => {
const files = event.target.files; // 这是一个FileList对象
if (files.length === 0) {
console.log('没有选择文件，或者选择了空文件。');
return;
}
const formData = new FormData();
// 遍历所有选中的文件，并添加到FormData中
// 注意：这里使用'files[]'作为key，后端通常能自动解析成文件数组
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
// 如果你还有其他表单数据要一起传给后端，也可以append进去
formData.append('description', '这是一批用户上传的文件');
formData.append('uploaderId', 'user-123');
// 使用Fetch API发送请求
fetch(uploadUrl, {
method: 'POST',
body: formData,
// FormData会自动设置正确的Content-Type，所以通常不需要手动设置 'Content-Type': 'multipart/form-data'
})
.then(response => {
// 检查HTTP响应状态码，例如200-299表示成功
if (!response.ok) {
// 抛出错误，以便在catch块中统一处理
throw new Error(`HTTP 错误！状态码: ${response.status}`);
}
return response.json(); // 解析JSON响应，或者根据后端返回类型选择response.text()等
})
.then(data => {
console.log('文件上传成功:', data);
// 在这里可以根据后端返回的数据更新UI，比如显示上传成功的文件列表或消息
alert('文件已成功上传！');
})
.catch(error => {
console.error('文件上传失败:', error);
// 向用户显示错误信息
alert(`文件上传过程中发生错误: ${error.message}`);
});
});你看，整个流程是不是挺清晰的？前端负责收集文件、打包，然后一股脑儿扔给后端。后端收到
multipart/form-data请求后，就能解析出这些文件和其他字段了。
性能与体验：大文件或批量上传的挑战与优化
当我们谈到多文件上传，特别是文件数量多或者单个文件体积大的时候，‘卡顿’、‘等待’这些词就容易浮现出来。这不仅仅是后端处理能力的锅，前端也得担起一部分责任。
文件太大，一次性上传可能导致网络超时或者内存溢出。这时候，‘分片上传’（Chunked Upload）就显得尤为重要。简单来说，就是把一个大文件切成很多小块，一块一块地传。每块传完后，后端再负责把它们拼起来。JS里可以用
File.prototype.slice()方法来实现文件切片。这有点像你寄一个超大的包裹，物流公司会建议你拆成几个小包裹分批寄送，既安全又高效。
// 伪代码，展示分片上传的核心思路
async function uploadFileInChunks(file, uploadUrl, chunkSize = 1024 * 1024 * 5) { // 默认5MB一片
let start = 0;
let chunkIndex = 0;
const totalChunks = Math.ceil(file.size / chunkSize);
const fileId = `${file.name}-${file.size}-${file.lastModified}`; // 唯一标识文件，用于后端合并
console.log(`开始上传文件: ${file.name}，总大小: ${file.size}字节，共 ${totalChunks} 片。`);
while (start < file.size) {
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end); // 核心：文件切片
const formData = new FormData();
formData.append('fileChunk', chunk);
formData.append('fileName', file.name);
formData.append('fileId', fileId); // 传递文件唯一ID
formData.append('chunkIndex', chunkIndex);
formData.append('totalChunks', totalChunks);
// 还可以加上文件MD5等信息，用于后端校验和断点续传
try {
const response = await fetch(uploadUrl, { method: 'POST', body: formData });
if (!response.ok) {
throw new Error(`分片 ${chunkIndex} 上传失败，状态码: ${response.status}`);
}
const data = await response.json();
console.log(`分片 ${chunkIndex}/${totalChunks} 上传成功`, data);
// 这里可以更新UI上的进度条
} catch (error) {
console.error(`文件 ${file.name} 的分片 ${chunkIndex} 上传失败:`, error);
// 提示用户，并可能实现重试逻辑
return false; // 停止后续上传
}
start = end;
chunkIndex++;
}
console.log(`文件 ${file.name} 所有分片上传完成。`);
return true; // 表示所有分片上传成功
}
// 实际调用可能这样：
// fileInput.addEventListener('change', async (event) => {
// const files = event.target.files;
// for (const file of files) {
// await uploadFileInChunks(file, '/api/upload-chunk-endpoint');
// }
// });其次，对于大量的图片或文件，在上传前做一些客户端的压缩处理也是个好主意。比如图片可以用
canvas进行尺寸调整或质量压缩，能有效减少传输数据量。这虽然增加了前端的计算负担，但能显著提升整体上传体验。
最后，别忘了Web Workers。当你在前端进行文件切片、MD5计算或者图片压缩这些耗时操作时，如果直接在主线程执行，页面很可能就卡死了。把这些计算任务扔给Web Worker，让它们在后台默默工作，主线程依然可以响应用户的操作，这样用户体验就流畅多了。这就像是把厨房里切菜洗菜的活儿交给帮手，自己可以继续招呼客人。
前端交互：上传进度、取消与错误反馈
上传文件这事儿，用户最怕的就是‘没反应’。一个好的上传体验，必须让用户清楚地知道当前发生了什么。
进度条是必不可少的。对于
XMLHttpRequest，你可以监听
xhr.upload.onprogress事件来获取上传进度。这个事件会周期性地触发，告诉你已经上传了多少字节，总共有多少字节。有了这些数据，你就能实时更新进度条了。
Fetch API虽然原生不支持
onprogress，但可以通过
ReadableStream来模拟，不过对于文件上传场景，
XMLHttpRequest在进度追踪上确实更直接方便一些。
// 使用XMLHttpRequest实现文件上传进度显示和取消功能
function uploadFileWithProgress(file, url, onProgress, onComplete, onError, onCancel) {
const xhr = new XMLHttpRequest();
// 监听上传进度
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
onProgress(percentComplete.toFixed(2)); // 回调进度
}
};
// 监听上传完成
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
onComplete(JSON.parse(xhr.responseText)); // 成功回调
} else {
onError(`上传失败: ${xhr.status} - ${xhr.statusText}`); // 错误回调
}
};
// 监听上传错误（网络问题等）
xhr.onerror = () => {
onError('网络错误或请求失败');
};
// 监听上传被取消
xhr.onabort = () => {
onCancel('上传已取消');
};
xhr.open('POST', url);
const formData = new FormData();
formData.append('file', file); // 假设只上传一个文件，多文件类似处理
xhr.send(formData);
// 返回xhr对象，以便外部可以调用abort()方法取消上传
return xhr;
}
// 示例用法：
// const uploadXHR = uploadFileWithProgress(
// fileInput.files[0],
// '/api/upload-single-file',
// (progress) => { console.log(`上传进度: ${progress}%`); /* 更新UI进度条 */ },
// (data) => { console.log('上传成功:', data); /* 提示用户 */ },
// (error) 
