如何在JavaScript中处理批量上传

JavaScript处理批量上传包括了使用File API读取文件、构建FormData以发送HTTP请求、处理并发上传以控制上传队列和监听上传过程。对于这些部分中，特别是构建FormData以发送HTTP请求是处理批量上传的关键环节。此过程涉及将一系列文件包装成一个表单数据集，然后通过AJAX请求发送到服务器。这并不是通过传统的表单提交实现的，而是通过JavaScript编程实现，这样可以实现非阻塞性的数据交互，用户在文件上传期间可以继续使用网页上的其他功能。

一、文件选择与读取

在处理批量上传时，首先需要读取用户选择的文件。用户通过HTML的<input>标签中的type="file"属性选择文件，multiple属性允许选择多个文件。

文件的选择一般通过一个事件监听器来处理。以下是基本的文件选择与读取过程：

// 获取文件选择输入元素
var inputElement = document.getElementById("fileInput");
// 监听input元素的变化
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
    var fileList = this.files; // fileList对象是一个FileList，包含用户选择的所有文件
    for (var i = 0, len = fileList.length; i < len; i++) {
        var file = fileList[i];
        // 这里可以对file对象进行一系列的处理
    }
}

在这一过程中，fileList对象包含用户所选择的文件，我们可以使用JavaScript的File API来读取。

二、文件数据准备与上传

在文件选择与读取后，下一步是准备文件数据发送到服务器。使用JavaScript内置的FormData类可以非常容易地构建用于发送的数据对象。

构建FormData对象后，我们使用XMLHttpRequest或Fetch API来发送数据至服务器。这里是使用FormData和XMLHttpRequest上传文件的基本示例：

function uploadFiles(fileList) {
    var formData = new FormData();
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        // 将文件添加到FormData对象中
        formData.append('file[]', file);
    }
    // 创建XMLHttpRequest来发送FormData
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload.php', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            // 上传成功
        } else {
            // 处理错误
        }
    };
    // 发送FormData
    xhr.send(formData);
}

这种方法的好处是可以非常灵活地处理文件上传，并可以通过监听事件来获取上传过程中的详细状态。

三、控制并发上传

在处理批量文件上传时，我们可能需要通过控制并发来防止过多文件同时上传导致服务器压力过大。

使用队列和一系列Promise对象是控制上传并发的有效方法。下面是一个并发控制的范例：

function uploadFile(file) {
    return new Promise((resolve, reject) => {
        var formData = new FormData();
        formData.append('file', file);
        var xhr = new XMLHttpRequest();
        // 这里可以设置xhr对象的其他属性，比如超时时间、响应类型等
        xhr.open('POST', '/upload.php', true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = function () {
            reject(xhr.statusText);
        };
        xhr.send(formData);
    });
}
async function handleUpload(files) {
    // 创建上传任务的Promise数组
    let uploadPromises = [];
    for (let file of files) {
        uploadPromises.push(uploadFile(file));
    }
    // 使用Promise.allSettled来得知所有上传任务的完成状态
    Promise.allSettled(uploadPromises).then(results => {
        results.forEach((result, index) => {
            if (result.status === 'fulfilled') {
                console.log(`文件${index+1}: 上传成功`);
            } else {
                console.log(`文件${index+1}: 上传失败，原因是${result.reason}`);
            }
        });
    });
}

这个示例展示了如果上传多个文件，我们可以通过将每个上传任务包装成一个Promise对象，然后使用Promise.allSettled来跟踪它们的完成情况。

四、上传进度监控

在上传文件时，监控进度是提高用户体验的重要部分。

可以使用XMLHttpRequest的事件来监听上传过程。下面是一个简单的上传进度监控的实现：

function uploadFileWithProgress(file) {
    return new Promise((resolve, reject) => {
        var formData = new FormData();
        formData.append('file', file);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload.php', true);
        // 监听上传进度事件
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                var complete = (event.loaded / event.total * 100 | 0);
                console.log(`文件${file.name}: 上传${complete}%`);
            }
        };
        xhr.onload = function () {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = function () {
            reject(xhr.statusText);
        };
        xhr.send(formData);
    });
}
async function handleFiles(files) {
    for (let file of files) {
        awAIt uploadFileWithProgress(file);
    }
}