怎样在JavaScript中实现文件上传？

文件上传是前端开发中高频出现的功能，在JavaScript中实现文件上传主要依赖文件选择控件获取文件对象，再结合数据提交方式将文件发送到服务端，下面介绍几种常用的实现方案。

基础准备：获取文件对象

首先需要页面提供文件选择入口，通过<input type="file">标签让用户选择本地文件，然后通过JavaScript获取选中的文件对象：

// 获取文件选择元素
const fileInput = document.querySelector('#fileInput');
// 监听文件选择变化
fileInput.addEventListener('change', function() {
    // 获取选中的文件列表，单文件取第一个即可
    const file = this.files[0];
    if (file) {
        console.log('选中的文件名：', file.name);
        console.log('文件大小：', file.size);
        console.log('文件类型：', file.type);
    }
});

方案一：使用XMLHttpRequest实现上传

XMLHttpRequest是传统的异步请求对象，兼容性较好，还支持监听上传进度，适合需要展示上传进度的场景：

function uploadByXHR(file) {
    // 创建XMLHttpRequest实例
    const xhr = new XMLHttpRequest();
    // 上传进度监听
    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            console.log('上传进度：', percent + '%');
        }
    });
    // 请求完成监听
    xhr.addEventListener('load', function() {
        if (xhr.status === 200) {
            console.log('上传成功，返回结果：', xhr.responseText);
        } else {
            console.log('上传失败，状态码：', xhr.status);
        }
    });
    // 请求错误监听
    xhr.addEventListener('error', function() {
        console.log('上传发生错误');
    });
    // 创建FormData对象，用于承载文件数据
    const formData = new FormData();
    // 追加文件，第一个参数是服务端接收的字段名，第二个是文件对象
    formData.append('uploadFile', file);
    // 可选：追加其他参数
    formData.append('userId', '123');
    // 打开请求，第一个参数是请求方法，第二个是上传接口地址
    xhr.open('POST', 'http://ipipp.com/upload');
    // 发送请求，传入FormData对象
    xhr.send(formData);
}

方案二：使用fetch API实现上传

fetch是ES6引入的现代请求API，语法更简洁，基于Promise设计，适合不需要监听上传进度的简单场景：

async function uploadByFetch(file) {
    // 创建FormData对象
    const formData = new FormData();
    formData.append('uploadFile', file);
    formData.append('userId', '123');
    try {
        // 发送fetch请求
        const response = await fetch('http://ipipp.com/upload', {
            method: 'POST',
            // 注意：使用FormData时不需要手动设置Content-Type，浏览器会自动加boundary
            body: formData
        });
        if (response.ok) {
            const result = await response.json();
            console.log('上传成功，返回结果：', result);
        } else {
            console.log('上传失败，状态码：', response.status);
        }
    } catch (error) {
        console.log('上传发生错误：', error);
    }
}

多文件上传实现

如果需要支持多文件上传，只需要修改文件选择控件和文件处理逻辑即可：

// 文件选择控件添加multiple属性支持多选
// <input type="file" id="fileInput" multiple>
const fileInput = document.querySelector('#fileInput');
fileInput.addEventListener('change', function() {
    const files = this.files;
    if (files.length === 0) return;
    // 遍历所有选中的文件，逐个上传
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        console.log(`开始上传第${i+1}个文件：${file.name}`);
        // 调用上传函数，这里以fetch为例
        uploadByFetch(file);
    }
});

注意事项

• 文件大小限制：可以在前端先判断文件大小，避免上传超大文件浪费带宽，比如限制单文件不超过10MB：if (file.size > 10 * 1024 * 1024) { alert('文件不能超过10MB'); return; }
• 文件类型校验：可以通过文件的type属性或者后缀名判断，避免上传不符合要求的文件
• 服务端配合：上传接口需要支持接收multipart/form-data格式的数据，并且做好服务端的文件存储和校验逻辑
• 兼容性：如果需要兼容非常老的浏览器，优先选择XMLHttpRequest方案，fetch在IE浏览器中完全不支持

JavaScript文件上传FormDataXMLHttpRequestfetch修改时间：2026-06-05 02:02:12