HTML5视频上传有五种方式：一、表单直接提交；二、input+XMLHttpRequest；三、input+Fetch API；四、前端格式与大小校验；五、多文件同时上传，均需配合accept属性和FormData使用。
如果您希望在网页中通过 HTML5 实现视频文件上传，可借助 元素或结合 FormData 对象完成客户端数据构造与发送。以下是几种可行的上传方式：
一、使用 input type="file" 直接提交表单上传视频
该方法依赖原生表单提交机制，无需 JavaScript 即可完成上传，适用于简单场景且服务端支持 multipart/form-data 解析。
1、在 HTML 中添加带有 accept 属性的文件输入控件，限定仅允许选择视频文件。
2、为 设置 type="file" 和 name="video"，确保服务端能通过字段名获取文件。
立即学习“前端免费学习笔记（深入）”；
3、将该输入框置于 标签内，并设置 method="POST" 与 enctype="multipart/form-data"。
4、添加 submit 按钮触发表单提交，浏览器会自动将选中的视频文件作为二进制数据发送至指定 action 地址。
二、使用 input type="file" + XMLHttpRequest 上传视频
该方式通过监听文件选择事件，手动读取文件对象并封装为 FormData，再通过 XMLHttpRequest 发送，便于添加进度监听与错误处理。
1、在页面中创建 元素，并绑定 change 事件监听器。
2、在事件回调中获取 event.target.files[0]，验证其 type 是否以 "video/" 开头。
3、新建 FormData 实例，调用 append("video", file) 将文件对象加入表单数据。
4、创建 XMLHttpRequest 实例，设置 open("POST", "/upload")，并调用 send(formData) 发起请求。
三、使用 input type="file" + Fetch API 上传视频
该方式利用现代 fetch() 接口替代 XMLHttpRequest，语法更简洁，支持 Promise 链式处理，适合异步控制流管理。
1、通过 document.querySelector('input[type="file"]') 获取文件输入元素，并监听其 change 事件。
2、从 files[0] 提取视频文件，检查 size 是否小于服务端允许的最大值（如 52428800 字节）。
3、构造 FormData 对象，使用 append("video_file", file, file.name) 显式指定文件名。
4、调用 fetch("/api/v1/upload", { method: "POST", body: formData }) 发送请求，注意不可设置 Content-Type 头，由浏览器自动填充边界值。
四、限制上传视频格式与大小的前端校验
在文件选择后立即执行格式与体积检查，可避免无效请求，提升用户体验并减轻服务端压力。
1、读取 input.files[0].type，比对是否属于 video/mp4、video/webm 或 video/ogg 等常见类型。
2、获取 input.files[0].size，判断是否超过预设阈值（例如 104857600 字节即 100MB）。
3、若校验失败，在界面上显示提示信息，同时调用 input.value = "" 清空已选文件引用。
4、校验通过后才允许触发后续上传逻辑，防止非法文件进入传输流程。
五、处理多个视频文件的同时上传
当需要支持多选上传时，可通过设置 multiple 属性启用多文件选择，并逐个或批量构造 FormData 进行提交。
1、为 添加 multiple 属性，并保持 accept="video/*" 限定媒体类型。
2、遍历 event.target.files 类数组，对每个文件执行格式与大小校验。
3、新建 FormData，循环调用 append("videos[]", file)，使用相同字段名实现数组式提交。
4、通过单次 fetch 或 XMLHttpRequest 提交全部文件，服务端需按字段名接收多个文件流。
