js实现文件上传功能

使用原生JavaScript实现文件上传

创建HTML文件输入元素

<input type="file" id="fileInput" />
<button id="uploadButton">上传文件</button>

获取文件并准备上传

document.getElementById('uploadButton').addEventListener('click', function() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    if (!file) {
        alert('请选择文件');
        return;
    }
});

创建FormData对象并发送请求

const formData = new FormData();
formData.append('file', file);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete + '% uploaded');
    }
};

xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('上传成功');
    } else {
        console.error('上传失败');
    }
};

xhr.send(formData);

使用Fetch API实现文件上传

更现代的Fetch API实现方式

document.getElementById('uploadButton').addEventListener('click', async function() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    if (!file) {
        alert('请选择文件');
        return;
    }

    const formData = new FormData();
    formData.append('file', file);

    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            const result = await response.json();
            console.log('上传成功', result);
        } else {
            console.error('上传失败');
        }
    } catch (error) {
        console.error('上传出错:', error);
    }
});

实现多文件上传

处理多个文件选择

const fileInput = document.getElementById('fileInput');
fileInput.multiple = true; // 允许多选

document.getElementById('uploadButton').addEventListener('click', function() {
    const files = fileInput.files;

    if (files.length === 0) {
        alert('请选择文件');
        return;
    }

    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
        formData.append('files', files[i]);
    }

    // 使用fetch或XMLHttpRequest发送请求
});

文件上传进度显示

添加进度条显示

<div id="progressContainer" style="width:100%;background:#ddd;">
    <div id="progressBar" style="height:30px;width:0%;background:#4CAF50;"></div>
</div>

更新进度条

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        const percentComplete = Math.round((e.loaded / e.total) * 100);
        document.getElementById('progressBar').style.width = percentComplete + '%';
        document.getElementById('progressBar').innerText = percentComplete + '%';
    }
};

文件类型和大小验证

添加文件验证

const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'application/pdf'];

document.getElementById('uploadButton').addEventListener('click', function() {
    const file = fileInput.files[0];

    if (!file) {
        alert('请选择文件');
        return;
    }

    if (file.size > MAX_FILE_SIZE) {
        alert('文件大小超过限制');
        return;
    }

    if (!ALLOWED_TYPES.includes(file.type)) {
        alert('不支持的文件类型');
        return;
    }

    // 继续上传逻辑
});