JS多文件上传实现教程详解

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JS实现多文件上传方法详解》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

JS实现多文件上传需用input的multiple属性获取FileList，通过FormData打包文件并用Fetch或XMLHttpRequest发送，结合进度监听、分片上传与Web Worker优化体验。

JS实现多文件上传，核心在于利用HTML的input type="file" multiple属性获取文件列表，然后通过FormData对象将这些文件打包，最后使用Fetch API或XMLHttpRequest发送到服务器。这套流程既直接又高效，是前端处理文件上传的通用方案。

解决方案

说起来，这事儿真不复杂。你首先得有个HTML <input type="file" multiple>。那个multiple属性是关键，它让用户能一次性选好几个文件。当用户选完文件后，这些文件会变成一个FileList对象，你可以通过event.target.files或者DOM元素的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请求后，就能解析出这些文件和其他字段了。

性能与体验：大文件或批量上传的挑战与优化

当我们谈到多文件上传，特别是文件数量多或者单个文件体积大的时候，‘卡顿’、‘等待’这些词就容易浮现出来。这不仅仅是后端处理能力的锅，前端也得担起一部分责任。

文件太大，一次性上传可能导致网络超时或者内存溢出。这时候，‘分片上传’（Chunked Upload）就显得尤为重要。简单来说，就是把一个大文件切成很多小块，一块一块地传。每块传完后，后端再负责把它们拼起来。JS里可以用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进行尺寸调整或质量压缩，能有效减少传输数据量。这虽然增加了前端的计算负担，但能显著提升整体上传体验。

最后，别忘了Web Workers。当你在前端进行文件切片、MD5计算或者图片压缩这些耗时操作时，如果直接在主线程执行，页面很可能就卡死了。把这些计算任务扔给Web Worker，让它们在后台默默工作，主线程依然可以响应用户的操作，这样用户体验就流畅多了。这就像是把厨房里切菜洗菜的活儿交给帮手，自己可以继续招呼客人。

前端交互：上传进度、取消与错误反馈

上传文件这事儿，用户最怕的就是‘没反应’。一个好的上传体验，必须让用户清楚地知道当前发生了什么。

进度条是必不可少的。对于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)

终于介绍完啦！小伙伴们，这篇关于《JS多文件上传实现教程详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！