js实现多文件自动上传
实现多文件自动上传的 JavaScript 方法
使用 HTML5 的 File API 和 FormData 对象可以实现多文件自动上传。以下是一个完整的实现方案。
HTML 部分
创建一个文件选择输入框和一个上传按钮：
<input type="file" id="fileInput" multiple>
<button id="uploadButton">上传文件</button>
<div id="progressContainer"></div>JavaScript 部分
监听文件选择并实现自动上传逻辑：
document.getElementById('uploadButton').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
const files = fileInput.files;
if (files.length === 0) {
alert('请选择至少一个文件');
return;
}
uploadFiles(files);
});
function uploadFiles(files) {
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percentComplete = Math.round((e.loaded / e.total) * 100);
document.getElementById('progressContainer').innerHTML =
`上传进度: ${percentComplete}%`;
}
};
xhr.onload = function() {
if (xhr.status === 200) {
alert('文件上传成功');
} else {
alert('文件上传失败');
}
};
xhr.send(formData);
}使用 Fetch API 的现代实现
async function uploadFiles(files) {
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
try {
const response = await fetch('/upload', {
method: 'POST',
body: formData
});
if (response.ok) {
const result = await response.json();
console.log('上传成功', result);
} else {
throw new Error('上传失败');
}
} catch (error) {
console.error('上传错误:', error);
}
}拖放上传实现
const dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragover', (e) => {
e.preventDefault();
dropArea.classList.add('dragover');
});
dropArea.addEventListener('dragleave', () => {
dropArea.classList.remove('dragover');
});
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
dropArea.classList.remove('dragover');
const files = e.dataTransfer.files;
uploadFiles(files);
});服务器端处理示例 (Node.js Express)
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.array('files[]'), (req, res) => {
res.json({ message: '文件上传成功', files: req.files });
});
app.listen(3000, () => console.log('服务器运行中'));进度条改进
使用更详细的进度显示：
function createProgressBar(fileName) {
const container = document.getElementById('progressContainer');
const progressDiv = document.createElement('div');
progressDiv.innerHTML = `
<p>${fileName}</p>
<progress value="0" max="100"></progress>
<span class="percent">0%</span>
`;
container.appendChild(progressDiv);
return progressDiv.querySelector('progress');
}并发上传控制
限制同时上传的文件数量：
async function uploadWithConcurrency(files, maxConcurrent = 3) {
const queue = [...files];
const inProgress = new Set();
const results = [];
while (queue.length > 0 || inProgress.size > 0) {
while (inProgress.size < maxConcurrent && queue.length > 0) {
const file = queue.shift();
const promise = uploadFile(file)
.then(result => {
inProgress.delete(promise);
results.push(result);
});
inProgress.add(promise);
}
await Promise.race([...inProgress]);
}
return results;
}这些方法提供了从基础到高级的多文件上传实现方案，可以根据具体需求选择合适的实现方式。
