js实现视频上传

2026-03-01 05:44:55JavaScript

使用HTML5和JavaScript实现视频上传

HTML5的<input type="file">元素结合JavaScript的File API可以轻松实现视频上传功能。需要创建一个文件选择器，监听文件选择事件，并使用FormData对象将文件发送到服务器。

<input type="file" id="videoUpload" accept="video/*">
<button id="uploadButton">上传视频</button>

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

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

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

显示上传进度

使用XMLHttpRequest可以获取上传进度，为用户提供反馈。现代浏览器支持progress事件，可以实时更新上传进度条。

function uploadWithProgress(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 + '%');
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('上传完成');
    } else {
      console.error('上传出错');
    }
  };

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

视频预览功能

在用户选择视频文件后，可以使用URL.createObjectURL()方法生成临时URL，在页面上预览视频内容。

<video id="videoPreview" controls style="max-width: 100%;"></video>

document.getElementById('videoUpload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file) {
    const videoPreview = document.getElementById('videoPreview');
    videoPreview.src = URL.createObjectURL(file);
    videoPreview.load();
  }
});

文件大小和类型验证

在客户端对视频文件进行基本验证，包括检查文件类型和大小限制，减少不必要的上传请求。

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

  if (!validTypes.includes(file.type)) {
    alert('请上传有效的视频文件 (MP4, WebM 或 Ogg)');
    return false;
  }

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

  return true;
}

分块上传大文件

对于大视频文件，可以使用分块上传技术将文件分割为多个小块分别上传，提高上传可靠性和效率。

async function uploadChunks(file) {
  const chunkSize = 5 * 1024 * 1024; // 5MB
  const totalChunks = Math.ceil(file.size / chunkSize);

  for (let i = 0; i < totalChunks; i++) {
    const start = i * 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('chunkIndex', i);
    formData.append('totalChunks', totalChunks);
    formData.append('fileName', file.name);

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

  console.log('所有分块上传完成');
}

服务器端处理

服务器端需要接收上传的视频文件并保存。以下是Node.js Express框架的简单示例：

const express = require('express');
const multer = require('multer');
const path = require('path');

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

app.post('/upload', upload.single('video'), (req, res) => {
  res.json({ message: '视频上传成功', filename: req.file.filename });
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

js实现视频上传