当前位置：首页 > JavaScript

js库文件上传js实现

2026-04-07 05:58:41JavaScript

文件上传的基本实现

使用原生JavaScript实现文件上传功能，可以通过监听文件输入框的change事件，获取用户选择的文件对象。利用FormData对象构建表单数据，通过XMLHttpRequest或fetch API发送到服务器。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
});

使用第三方库实现上传

对于更复杂的需求，可以使用专门的文件上传库如Dropzone.js或Uppy。这些库提供了拖放上传、进度显示、文件预览等功能。

js库文件上传js实现

Dropzone.js的基本用法：

// HTML中需要包含一个id为myDropzone的元素
Dropzone.options.myDropzone = {
    url: "/upload",
    paramName: "file",
    maxFilesize: 2, // MB
    acceptedFiles: "image/*",
    addRemoveLinks: true,
    success: function(file, response) {
        console.log("File uploaded successfully");
    }
};

分块上传实现

对于大文件上传，可以采用分块上传技术。将文件分割为多个小块，分别上传并在服务器端合并。

js库文件上传js实现

const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB

async function uploadFile(file) {
    const fileSize = file.size;
    let start = 0;
    let chunkIndex = 0;

    while (start < fileSize) {
        const chunk = file.slice(start, start + CHUNK_SIZE);
        const formData = new FormData();
        formData.append('chunk', chunk);
        formData.append('chunkIndex', chunkIndex);
        formData.append('totalChunks', Math.ceil(fileSize / CHUNK_SIZE));
        formData.append('fileName', file.name);

        await fetch('/upload-chunk', {
            method: 'POST',
            body: formData
        });

        start += CHUNK_SIZE;
        chunkIndex++;
    }
}

进度显示实现

通过XMLHttpRequest的progress事件可以实时获取上传进度，更新UI显示。

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        console.log(`上传进度: ${percentComplete}%`);
        document.getElementById('progressBar').value = percentComplete;
    }
});

xhr.open('POST', '/upload');
const formData = new FormData();
formData.append('file', file);
xhr.send(formData);

文件验证处理

在上传前可以对文件进行验证，包括大小、类型等限制。

function validateFile(file) {
    const validTypes = ['image/jpeg', 'image/png'];
    const maxSize = 10 * 1024 * 1024; // 10MB

    if (!validTypes.includes(file.type)) {
        alert('仅支持JPEG和PNG格式的图片');
        return false;
    }

    if (file.size > maxSize) {
        alert('文件大小不能超过10MB');
        return false;
    }

    return true;
}

fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (validateFile(file)) {
        // 执行上传
    }
});