JS如何实现多文件上传

input type="file" multiple

FormData

Fetch API

XMLHttpRequest

multiple

FileList

event.target.files

files

FormData

Content-Type

multipart/form-data

// 假设HTML中有一个 <input type="file" id="fileInput" multiple>
const fileInput = document.getElementById('fileInput');
const uploadUrl = '/api/upload-multiple-files'; // 你的后端上传接口

fileInput.addEventListener('change', (event) => {
    const files = event.target.files; // 这是一个FileList对象

    if (files.length === 0) {
        console.log('没有选择文件，或者选择了空文件。');
        return;
    }

    const formData = new FormData();
    // 遍历所有选中的文件，并添加到FormData中
    // 注意：这里使用'files[]'作为key，后端通常能自动解析成文件数组
    for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
    }

    // 如果你还有其他表单数据要一起传给后端，也可以append进去
    formData.append('description', '这是一批用户上传的文件');
    formData.append('uploaderId', 'user-123');

    // 使用Fetch API发送请求
    fetch(uploadUrl, {
        method: 'POST',
        body: formData,
        // FormData会自动设置正确的Content-Type，所以通常不需要手动设置 'Content-Type': 'multipart/form-data'
    })
    .then(response => {
        // 检查HTTP响应状态码，例如200-299表示成功
        if (!response.ok) {
            // 抛出错误，以便在catch块中统一处理
            throw new Error(`HTTP 错误！状态码: ${response.status}`);
        }
        return response.json(); // 解析JSON响应，或者根据后端返回类型选择response.text()等
    })
    .then(data => {
        console.log('文件上传成功:', data);
        // 在这里可以根据后端返回的数据更新UI，比如显示上传成功的文件列表或消息
        alert('文件已成功上传！');
    })
    .catch(error => {
        console.error('文件上传失败:', error);
        // 向用户显示错误信息
        alert(`文件上传过程中发生错误: ${error.message}`);
    });
});

multipart/form-data

File.prototype.slice()

// 伪代码，展示分片上传的核心思路
async function uploadFileInChunks(file, uploadUrl, chunkSize = 1024 * 1024 * 5) { // 默认5MB一片
    let start = 0;
    let chunkIndex = 0;
    const totalChunks = Math.ceil(file.size / chunkSize);
    const fileId = `${file.name}-${file.size}-${file.lastModified}`; // 唯一标识文件，用于后端合并

    console.log(`开始上传文件: ${file.name}，总大小: ${file.size}字节，共 ${totalChunks} 片。`);

    while (start < file.size) {
        const end = Math.min(start + chunkSize, file.size);
        const chunk = file.slice(start, end); // 核心：文件切片

        const formData = new FormData();
        formData.append('fileChunk', chunk);
        formData.append('fileName', file.name);
        formData.append('fileId', fileId); // 传递文件唯一ID
        formData.append('chunkIndex', chunkIndex);
        formData.append('totalChunks', totalChunks);
        // 还可以加上文件MD5等信息，用于后端校验和断点续传

        try {
            const response = await fetch(uploadUrl, { method: 'POST', body: formData });
            if (!response.ok) {
                throw new Error(`分片 ${chunkIndex} 上传失败，状态码: ${response.status}`);
            }
            const data = await response.json();
            console.log(`分片 ${chunkIndex}/${totalChunks} 上传成功`, data);
            // 这里可以更新UI上的进度条
        } catch (error) {
            console.error(`文件 ${file.name} 的分片 ${chunkIndex} 上传失败:`, error);
            // 提示用户，并可能实现重试逻辑
            return false; // 停止后续上传
        }

        start = end;
        chunkIndex++;
    }
    console.log(`文件 ${file.name} 所有分片上传完成。`);
    return true; // 表示所有分片上传成功
}
// 实际调用可能这样：
// fileInput.addEventListener('change', async (event) => {
//     const files = event.target.files;
//     for (const file of files) {
//         await uploadFileInChunks(file, '/api/upload-chunk-endpoint');
//     }
// });

canvas

XMLHttpRequest

xhr.upload.onprogress

Fetch API

onprogress

ReadableStream

XMLHttpRequest

// 使用XMLHttpRequest实现文件上传进度显示和取消功能
function uploadFileWithProgress(file, url, onProgress, onComplete, onError, onCancel) {
    const xhr = new XMLHttpRequest();

    // 监听上传进度
    xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            onProgress(percentComplete.toFixed(2)); // 回调进度
        }
    };

    // 监听上传完成
    xhr.onload = () => {
        if (xhr.status >= 200 && xhr.status < 300) {
            onComplete(JSON.parse(xhr.responseText)); // 成功回调
        } else {
            onError(`上传失败: ${xhr.status} - ${xhr.statusText}`); // 错误回调
        }
    };

    // 监听上传错误（网络问题等）
    xhr.onerror = () => {
        onError('网络错误或请求失败');
    };

    // 监听上传被取消
    xhr.onabort = () => {
        onCancel('上传已取消');
    };

    xhr.open('POST', url);
    const formData = new FormData();
    formData.append('file', file); // 假设只上传一个文件，多文件类似处理

    xhr.send(formData);

    // 返回xhr对象，以便外部可以调用abort()方法取消上传
    return xhr;
}

// 示例用法：
// const uploadXHR = uploadFileWithProgress(
//     fileInput.files[0],
//     '/api/upload-single-file',
//     (progress) => { console.log(`上传进度: ${progress}%`); /* 更新UI进度条 */ },
//     (data) => { console.log('上传成功:', data); /* 提示用户 */ },
//     (error)