html怎么上传视频

实现HTML视频上传的步骤

创建文件上传表单

使用<input type="file">元素，并设置accept属性限制文件类型为视频：

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

• accept="video/"：仅允许选择视频文件（如MP4、WebM等）。
• multiple：允许多文件上传（可省略则单文件）。

添加文件类型和大小验证（可选）

通过JavaScript校验文件是否符合要求：

const input = document.getElementById('videoUpload');
input.addEventListener('change', function(e) {
    const files = e.target.files;
    for (let file of files) {
        // 检查文件类型
        if (!file.type.startsWith('video/')) {
            alert('请上传视频文件！');
            return;
        }
        // 检查文件大小（例如限制50MB）
        if (file.size > 50  1024  1024) {
            alert('视频大小超过50MB！');
            return;
        }
    }
});

显示视频预览（可选）

使用FileReader或URL.createObjectURL生成预览：

<video id="preview" controls width="400"></video>
<script>
input.addEventListener('change', function(e) {
    const file = e.target.files[0]; // 获取第一个文件
    if (file) {
        const url = URL.createObjectURL(file);
        document.getElementById('preview').src = url; // 设置预览源
    }
});
</script>

提交文件到服务器

通过表单或AJAX提交文件：

<form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="video" accept="video/">
    <button type="submit">上传</button>
</form>

或使用AJAX异步提交（需后端接口支持）：

input.addEventListener('change', function(e) {
    const formData = new FormData();
    formData.append('video', e.target.files[0]);
    fetch('/upload', { method: 'POST', body: formData })
        .then(response => response.json())
        .then(data => alert('上传成功！'));
});

关键标签与属性归纳表

相关问题与解答

问题1：如何限制用户只能上传特定格式的视频（如MP4）？
解答：

• 修改accept属性为accept=".mp4"，或使用更严格的MIME类型（如accept="video/mp4"）。
• 在JavaScript中检查file.type是否为video/mp4，若不符合则提示错误。
  示例：

  if (file.type !== 'video/mp4') {
    alert('仅支持MP4格式！');
  }

问题2：如何显示上传进度条？
解答：

• 使用XMLHttpRequest或Fetch的progress事件监听上传进度。
  示例（基于XMLHttpRequest）：

  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', function(e) {
    const percent = (e.loaded / e.total)  100;
    document.getElementById('progressBar').style.width = percent + '%';
  });
  xhr.open('POST', '/upload');
  xhr.send(formData);

• HTML部分需添加进度条元素：

  <div id="progressBar" style="width: 0%; height: 20px; background: green;">