当前位置：首页 > JavaScript

js实现视频上传代码

2026-04-04 23:57:53JavaScript

js实现视频上传代码

视频上传实现方法

前端部分（HTML + JavaScript）

<input type="file" id="videoUpload" accept="video/*">
<button onclick="uploadVideo()">上传视频</button>
<progress id="uploadProgress" value="0" max="100"></progress>

<script>
function uploadVideo() {
  const fileInput = document.getElementById('videoUpload');
  const file = fileInput.files[0];

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

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

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

  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      const percent = Math.round((e.loaded / e.total) * 100);
      document.getElementById('uploadProgress').value = percent;
    }
  };

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

  xhr.send(formData);
}
</script>

后端部分（Node.js + Express）

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

const app = express();
const upload = multer({ 
  dest: 'uploads/',
  limits: { fileSize: 100 * 1024 * 1024 } // 限制100MB
});

app.post('/upload', upload.single('video'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('未收到文件');
  }

  // 获取文件信息
  const fileInfo = {
    originalName: req.file.originalname,
    size: req.file.size,
    mimetype: req.file.mimetype,
    path: req.file.path
  };

  res.status(200).json(fileInfo);
});

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

文件验证处理

// 在前端脚本中添加验证
function validateVideo(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;
}