js怎么检测所有文件上传完成

在JavaScript中检测所有文件上传完成，可以使用以下几种方法：通过XHR（XMLHttpRequest）对象、通过Fetch API、使用第三方库如Axios。 在本文中，我们将详细介绍这几种方法，并探讨如何在实际项目中应用它们。

一、使用XMLHttpRequest对象

XMLHttpRequest（XHR）对象是传统的文件上传方式，在许多旧版浏览器中得到广泛支持。下面是一个简单的示例，展示如何使用XHR对象检测所有文件上传完成：

function uploadFiles(files) {
    let completed = 0;
    const totalFiles = files.length;
    files.forEach(file => {
        const xhr = new XMLHttpRequest();
        const formData = new FormData();
        formData.append('file', file);
        xhr.open('POST', '/upload');
        xhr.onload = function() {
            if (xhr.status === 200) {
                completed++;
                if (completed === totalFiles) {
                    console.log('All files uploaded successfully');
                }
            } else {
                console.error('Error uploading file:', file.name);
            }
        };
        xhr.send(formData);
    });
}
// Usage
const inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (event) => {
    const files = event.target.files;
    uploadFiles(files);
});

在这个示例中，我们利用XMLHttpRequest对象的onload事件来检测每个文件上传的状态。当所有文件上传完成后，会在控制台输出一条消息。

优点

广泛支持：几乎所有的浏览器都支持。
简单易用：对于基本文件上传需求，代码量少且易于理解。

缺点

灵活性不足：对于复杂的文件上传需求（如并发控制、进度条显示等），XHR对象的灵活性稍显不足。
冗余代码：需要手动处理每个文件的上传逻辑，代码冗余度较高。

二、使用Fetch API

Fetch API是现代浏览器中推荐使用的文件上传方式，具有更好的灵活性和可读性。下面是一个使用Fetch API的示例：

async function uploadFiles(files) {
    let completed = 0;
    const totalFiles = files.length;
    const uploadPromises = Array.from(files).map(file => {
        const formData = new FormData();
        formData.append('file', file);
        return fetch('/upload', {
            method: 'POST',
            body: formData
        }).then(response => {
            if (response.ok) {
                completed++;
                if (completed === totalFiles) {
                    console.log('All files uploaded successfully');
                }
            } else {
                throw new Error('Error uploading file: ' + file.name);
            }
        });
    });
    try {
        await Promise.all(uploadPromises);
    } catch (error) {
        console.error(error);
    }
}
// Usage
const inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (event) => {
    const files = event.target.files;
    uploadFiles(files);
});

在这个示例中，我们使用Promise.all来等待所有文件上传完成。当所有文件上传成功后，会在控制台输出一条消息。

优点

灵活性高：Fetch API支持更多的配置选项，便于处理复杂的文件上传需求。
代码简洁：代码更易读、更简洁。

缺点

浏览器支持：虽然大多数现代浏览器都支持Fetch API，但一些旧版浏览器可能不支持。

三、使用第三方库如Axios

Axios是一个基于Promise的HTTP客户端，适用于浏览器和Node.js。使用Axios可以更简洁、更高效地进行文件上传操作。下面是一个使用Axios的示例：

import axios from 'axios';
async function uploadFiles(files) {
    let completed = 0;
    const totalFiles = files.length;
    const uploadPromises = Array.from(files).map(file => {
        const formData = new FormData();
        formData.append('file', file);
        return axios.post('/upload', formData).then(response => {
            if (response.status === 200) {
                completed++;
                if (completed === totalFiles) {
                    console.log('All files uploaded successfully');
                }
            } else {
                throw new Error('Error uploading file: ' + file.name);
            }
        });
    });
    try {
        await Promise.all(uploadPromises);
    } catch (error) {
        console.error(error);
    }
}
// Usage
const inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (event) => {
    const files = event.target.files;
    uploadFiles(files);
});

在这个示例中，我们使用axios.post方法上传文件，并利用Promise.all等待所有文件上传完成。

优点

简单易用：Axios封装了许多常用的HTTP请求功能，使用起来更加方便。
丰富的功能：Axios支持拦截器、中断请求、取消请求等高级功能。

缺点

依赖性：需要额外引入Axios库，增加了项目的依赖性。

四、实际应用中的注意事项

在实际项目中，文件上传通常涉及更多的细节和需求。以下是一些常见的注意事项：

并发控制

在处理大量文件上传时，可能需要限制同时上传的文件数量，以避免服务器过载。可以使用异步队列来控制并发上传数量。例如：

async function uploadFiles(files, maxConcurrentUploads = 3) {
    let completed = 0;
    let activeUploads = 0;
    const totalFiles = files.length;
    const fileQueue = Array.from(files);
    const uploadNext = async () => {
        if (fileQueue.length === 0) return;
        activeUploads++;
        const file = fileQueue.shift();
        const formData = new FormData();
        formData.append('file', file);
        try {
            const response = await fetch('/upload', {
                method: 'POST',
                body: formData
            });
            if (response.ok) {
                completed++;
                if (completed === totalFiles) {
                    console.log('All files uploaded successfully');
                }
            } else {
                throw new Error('Error uploading file: ' + file.name);
            }
        } catch (error) {
            console.error(error);
        } finally {
            activeUploads--;
            if (activeUploads < maxConcurrentUploads) {
                uploadNext();
            }
        }
    };
    for (let i = 0; i < maxConcurrentUploads; i++) {
        uploadNext();
    }
}
// Usage
const inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (event) => {
    const files = event.target.files;
    uploadFiles(files);
});

进度条显示

为了提升用户体验，可以在上传过程中显示进度条。以下是一个简单的进度条示例：

function uploadFiles(files) {
    let completed = 0;
    const totalFiles = files.length;
    const progressBar = document.getElementById('progressBar');
    files.forEach(file => {
        const xhr = new XMLHttpRequest();
        const formData = new FormData();
        formData.append('file', file);
        xhr.open('POST', '/upload');
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                const percentComplete = (event.loaded / event.total) * 100;
                progressBar.value = percentComplete;
            }
        };
        xhr.onload = function() {
            if (xhr.status === 200) {
                completed++;
                if (completed === totalFiles) {
                    console.log('All files uploaded successfully');
                    progressBar.value = 100;
                }
            } else {
                console.error('Error uploading file:', file.name);
            }
        };
        xhr.send(formData);
    });
}
// Usage
const inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (event) => {
    const files = event.target.files;
    uploadFiles(files);
});

五、总结

JavaScript提供了多种方法来检测文件上传完成，包括XMLHttpRequest对象、Fetch API和第三方库如Axios。每种方法都有其优点和缺点，选择适合项目需求的方法尤为重要。在实际项目中，可能还需要考虑并发控制、进度条显示等细节，以提升用户体验。

对于团队项目协作和管理，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们可以帮助团队高效管理项目进度和任务分配。