js实现视频上传代码

2026-01-31 07:58:22JavaScript

视频上传的基本实现

使用HTML5的<input type="file">元素可以轻松实现视频文件的选择功能。通过设置accept属性限制文件类型为视频格式。

<input type="file" id="videoUpload" accept="video/*">

文件选择和预览

通过JavaScript监听文件选择事件，可以获取用户选择的视频文件对象。使用URL.createObjectURL()方法生成临时URL用于视频预览。

document.getElementById('videoUpload').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const videoURL = URL.createObjectURL(file);
    const preview = document.createElement('video');
    preview.src = videoURL;
    preview.controls = true;
    document.body.appendChild(preview);
});

上传到服务器

使用FormData对象构建表单数据，通过fetch或XMLHttpRequest将视频文件发送到服务器。需要设置Content-Type为multipart/form-data。

js实现视频上传代码

function uploadVideo(file) {
    const formData = new FormData();
    formData.append('video', file);

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

进度监控

通过XMLHttpRequest的upload属性可以监控上传进度，实时更新进度条显示。

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

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            console.log(`Uploaded: ${percent.toFixed(2)}%`);
        }
    };

    xhr.onload = function() {
        console.log('Upload complete');
    };

    const formData = new FormData();
    formData.append('video', file);
    xhr.send(formData);
}

文件验证

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

js实现视频上传代码

function validateVideo(file) {
    const validTypes = ['video/mp4', 'video/webm', 'video/ogg'];
    const maxSize = 100 * 1024 * 1024; // 100MB

    if (!validTypes.includes(file.type)) {
        alert('Invalid video format');
        return false;
    }

    if (file.size > maxSize) {
        alert('Video too large');
        return false;
    }

    return true;
}

分块上传

对于大视频文件，可以实现分块上传以提高可靠性和恢复能力。

async function chunkedUpload(file, chunkSize = 5 * 1024 * 1024) {
    const totalChunks = Math.ceil(file.size / chunkSize);
    let chunkNumber = 0;

    while (chunkNumber < totalChunks) {
        const start = chunkNumber * chunkSize;
        const end = Math.min(start + chunkSize, file.size);
        const chunk = file.slice(start, end);

        const formData = new FormData();
        formData.append('chunk', chunk);
        formData.append('chunkNumber', chunkNumber);
        formData.append('totalChunks', totalChunks);
        formData.append('filename', file.name);

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

        chunkNumber++;
    }
}

使用第三方库

对于更复杂的需求，可以考虑使用现成的文件上传库如uppy或dropzone。

// 使用uppy示例
const uppy = new Uppy.Core()
    .use(Uppy.Dashboard, { target: '#upload-container' })
    .use(Uppy.XHRUpload, { endpoint: '/upload' });

uppy.on('complete', (result) => {
    console.log('Upload complete:', result);
});

这些方法涵盖了从基本到高级的视频上传功能实现，可以根据具体需求选择适合的方案。