input标签上传文件夹页面卡死应该怎么办？-灵析社区
劳资最帅使用input标签上传文件时，当用户选择文件夹且文件夹中包含太多文件时，页面会卡死或者崩溃。 请问这种情况应该怎么优化？谢谢
LightSea可以限限制上传文件个数
const MAX_FILE_COUNT = 500;
function changeFile(event) {
const files = event.target.files;
if (files.length > MAX_FILE_COUNT) {
alert(`请不要选择超过${MAX_FILE_COUNT}个文件`);
// 可能需要清空文件选择，具体取决于浏览器兼容性
event.target.value = '';
return;
}
// ... 其他文件处理逻辑
}
还可以使用Web Workers
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ action: 'validateFiles', files: event.target.files });
worker.onmessage = (event) => {
if (event.data.action === 'validationResult') {
console.log('Validation result:', event.data.result);
}
};
// worker.js
self.addEventListener('message', (event) => {
switch (event.data.action) {
case 'validateFiles':
const validFiles = event.data.files.filter(validateFile);
self.postMessage({ action: 'validationResult', result: validFiles });
break;
// ...
}
});
function validateFile(file) {
// 文件验证逻辑...
}
还可以分批次上传
async function uploadFilesInBatches(files, batchSize = 100) {
for (let i = 0; i < files.length; i += batchSize) {
const batchFiles = files.slice(i, i + batchSize);
const formData = new FormData();
for (const file of batchFiles) {
formData.append('files', file);
}
await fetch('/api/upload', { method: 'POST', body: formData });
}
}
// 在changeFile事件处理器中调用
uploadFilesInBatches(event.target.files);
懒加载：
先上传文件的基本信息（如名称、大小、类型、路径等），待用户需要查看或进一步操作时再上传实际文件内容。
流式上传：
利用Blob、FileReader的readAsArrayBuffer或第三方库（如Resumable.js）不等待整个文件加载完成。