JavaScript中如何实现文件上传

文件上传是Web应用中非常常见的功能，原生JavaScript可以通过组合多个内置API实现灵活的文件上传能力，无需依赖第三方库。核心思路是先获取用户选择的文件，再通过合适的方式将文件数据发送到服务端。

基础实现步骤

1. 创建文件选择控件

首先需要在页面中添加文件选择输入框，让用户可以选择本地文件，同时可以添加一个上传按钮触发上传逻辑：

<input type="file" id="fileInput" multiple>
<button id="uploadBtn">上传文件</button>
<div id="progress"></div>

2. 获取选中的文件

通过文件输入框的files属性可以获取用户选择的所有文件，该属性返回的是一个FileList对象，支持多选时获取多个文件：

const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');

uploadBtn.addEventListener('click', () => {
    const files = fileInput.files;
    if (files.length === 0) {
        alert('请先选择文件');
        return;
    }
    // 后续上传逻辑
});

3. 使用FormData封装文件数据

FormData对象可以模拟表单提交的数据格式，方便将文件数据和其他参数一起传递到服务端，它会自动处理文件的编码格式：

const formData = new FormData();
// 遍历所有选中的文件，添加到FormData中
for (let i = 0; i < files.length; i++) {
    // 第一个参数是服务端接收文件的字段名，需要和后端约定
    formData.append('files', files[i]);
}
// 可以添加其他额外参数
formData.append('userId', '123');

4. 发送上传请求

使用XMLHttpRequest实现

XMLHttpRequest可以监听上传进度，适合需要展示上传百分比的场景：

const xhr = new XMLHttpRequest();
// 监听上传进度
xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
        const percent = Math.round((event.loaded / event.total) * 100);
        document.getElementById('progress').innerText = `上传进度：${percent}%`;
    }
});
// 监听请求完成
xhr.addEventListener('load', () => {
    if (xhr.status === 200) {
        alert('上传成功');
        document.getElementById('progress').innerText = '';
    } else {
        alert('上传失败');
    }
});
// 监听错误
xhr.addEventListener('error', () => {
    alert('上传出错，请重试');
});
// 打开连接并发送数据
xhr.open('POST', '/api/upload');
xhr.send(formData);

使用fetch API实现

fetch是更现代的请求API，语法更简洁，但是默认不支持进度监听，如果需要进度功能还是建议使用XMLHttpRequest：

fetch('/api/upload', {
    method: 'POST',
    body: formData
})
.then(response => {
    if (response.ok) {
        return response.json();
    }
    throw new Error('上传失败');
})
.then(data => {
    alert('上传成功');
})
.catch(error => {
    alert(error.message);
});

扩展功能实现

文件类型和大小校验

在上传前可以对文件进行校验，避免不符合要求的文件被上传到服务端：

function validateFile(file) {
    // 允许的文件类型
    const allowTypes = ['image/jpeg', 'image/png', 'application/pdf'];
    // 允许的最大文件大小，单位字节，这里设置为10MB
    const maxSize = 10 * 1024 * 1024;
    if (!allowTypes.includes(file.type)) {
        alert(`文件${file.name}类型不支持，仅支持jpeg、png、pdf格式`);
        return false;
    }
    if (file.size > maxSize) {
        alert(`文件${file.name}大小超过10MB限制`);
        return false;
    }
    return true;
}

// 在上传前校验所有文件
for (let i = 0; i < files.length; i++) {
    if (!validateFile(files[i])) {
        return;
    }
}

多文件并发上传

如果需要同时上传多个文件，可以创建多个请求并发发送，提升上传效率：

async function uploadMultipleFiles(files) {
    const uploadPromises = [];
    for (let i = 0; i < files.length; i++) {
        const formData = new FormData();
        formData.append('file', files[i]);
        const promise = fetch('/api/upload', {
            method: 'POST',
            body: formData
        }).then(res => res.json());
        uploadPromises.push(promise);
    }
    try {
        const results = await Promise.all(uploadPromises);
        alert('所有文件上传完成');
    } catch (error) {
        alert('部分文件上传失败');
    }
}

注意事项

• 服务端需要配置对应的文件接收接口，并且设置合适的最大上传文件大小限制，避免大文件上传失败。
• 如果上传的是敏感文件，需要增加身份验证逻辑，比如在上传请求头中携带token。
• 生产环境中建议对上传的文件做病毒扫描，避免恶意文件被上传到服务器。
• 跨域场景下需要服务端配置对应的CORS规则，允许前端域名的请求。

JavaScript文件上传FormDataXMLHttpRequestfetch修改时间：2026-06-06 07:45:51