js实现批量上传
批量上传的实现方法
使用JavaScript实现批量上传功能通常涉及文件选择、文件处理和上传三个核心环节。以下是常见的实现方案：
文件选择与处理
使用HTML5的<input type="file">元素并设置multiple属性允许选择多个文件：
<input type="file" id="fileInput" multiple>通过JavaScript获取文件列表并验证：
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const files = Array.from(event.target.files);
// 验证文件类型/大小等
files.forEach(file => {
if(file.size > 10 * 1024 * 1024) {
alert('文件大小超过限制');
return;
}
});
});分片上传处理 对于大文件可进行分片上传：
function uploadChunk(file, chunkSize = 5 * 1024 * 1024) {
let offset = 0;
const chunks = Math.ceil(file.size / chunkSize);
while(offset < file.size) {
const chunk = file.slice(offset, offset + chunkSize);
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('name', file.name);
formData.append('index', offset / chunkSize);
fetch('/upload', {
method: 'POST',
body: formData
}).then(response => {
// 处理响应
});
offset += chunkSize;
}
}并发控制 避免同时上传过多文件导致性能问题：
async function batchUpload(files, maxConcurrent = 3) {
const queue = [];
for(let i=0; i<files.length; i++) {
const task = uploadFile(files[i]).then(() => {
queue.splice(queue.indexOf(task), 1);
});
queue.push(task);
if(queue.length >= maxConcurrent) {
await Promise.race(queue);
}
}
await Promise.all(queue);
}进度显示 通过XMLHttpRequest或fetch API的进度事件：
function uploadWithProgress(file) {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
const percent = Math.round((e.loaded / e.total) * 100);
updateProgressBar(file.name, percent);
});
xhr.open('POST', '/upload');
xhr.send(file);
}完整示例
document.getElementById('uploadBtn').addEventListener('click', async () => {
const files = document.getElementById('fileInput').files;
if(files.length === 0) return;
try {
await batchUpload(Array.from(files));
alert('所有文件上传完成');
} catch(error) {
console.error('上传出错:', error);
}
});注意事项
- 服务端需要支持多文件接收和处理
- 对于大文件应考虑断点续传机制
- 需要处理网络中断等异常情况
- 跨域上传需要配置CORS
- 生产环境建议使用成熟的上传库如Dropzone.js、Uppy等
以上方案可根据实际需求进行组合和调整，核心在于文件处理、并发控制和用户体验的平衡。
