h5怎么实现上传视频

2026-03-06 10:04:25HTML

实现H5上传视频的方法

使用HTML5的<input type="file">元素结合JavaScript的File API可以实现视频上传功能。需要设置accept属性限制文件类型为视频格式。

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

获取上传文件信息

通过JavaScript监听文件选择事件，获取File对象包含的视频信息。File对象提供了name、size、type等属性，可用于前端验证。

document.getElementById('videoUpload').addEventListener('change', function(e) {
    const file = e.target.files[0];
    console.log('文件名:', file.name);
    console.log('文件大小:', file.size);
    console.log('文件类型:', file.type);
});

前端验证处理

在上传前进行文件大小和类型验证，提升用户体验。通过检查File对象的属性实现基本验证逻辑。

if (!file.type.includes('video/')) {
    alert('请选择视频文件');
    return;
}
if (file.size > 100 * 1024 * 1024) { // 100MB限制
    alert('视频大小不能超过100MB');
    return;
}

使用FormData上传

创建FormData对象将文件数据附加到AJAX请求中，这是最常见的上传方式。XMLHttpRequest或fetch API均可用于发送数据。

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

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

显示上传进度

利用XMLHttpRequest的progress事件可以实现进度条功能。通过计算loaded和total值更新UI进度显示。

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
});
xhr.open('POST', '/upload');
xhr.send(formData);

使用第三方库简化开发

对于复杂需求，可以考虑使用现成的上传库：

uppy：模块化设计，支持多种上传方式
Dropzone：提供拖拽上传功能
resumable.js：支持断点续传

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

服务器端处理

服务器端需要配置相应的路由接收文件。以Node.js为例，使用multer中间件处理文件上传。

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('video'), (req, res) => {
    res.json({ filename: req.file.filename });
});

视频预览功能

在文件选择后使用URL.createObjectURL生成临时URL，可在<video>元素中预览。

<video id="preview" controls width="400"></video>

<script>
    document.getElementById('videoUpload').addEventListener('change', function(e) {
        const video = document.getElementById('preview');
        video.src = URL.createObjectURL(e.target.files[0]);
    });
</script>

分片上传实现

对于大文件上传，可采用分片上传策略。将文件分割为多个小块分别上传，最后在服务器合并。

h5怎么实现上传视频

const chunkSize = 5 * 1024 * 1024; // 5MB
let offset = 0;

while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    // 上传每个chunk...
    offset += chunkSize;
}