HTML5用上传视频最直接，需加accept="video/*"并用JS校验file.type和文件后缀，大文件须预检体积，用FormData+fetch发送且不设Content-Type，注意Nginx和后端配置。
HTML5里用
浏览器原生支持视频上传，不需要额外库。关键在于限制类型和校验，避免用户误选非视频文件。
- 加
accept="video/*"可过滤出常见视频格式（mp4、webm、mov等），但只是前端提示，不阻止伪造 - 必须在 JS 中检查
file.type和file.name后缀，比如file.type.startsWith("video/") - 大视频建议加
webkitdirectory或分片逻辑前的体积预检：if (file.size > 500 * 1024 * 1024) { alert("不能超过500MB"); return; }
用 FormData + fetch 发送视频到后端最稳妥
别用 XMLHttpRequest 手动设 header——FormData 会自动处理 boundary，fetch 更简洁且默认兼容 multipart/form-data。
const fileInput = document.querySelector('input[type="file"]');
const uploadBtn = document.querySelector('#upload');
uploadBtn.addEventListener('click', async () => {
const file = fileInput.files[0];
if (!file) return;
const formData = new FormData();
formData.append('video', file); // 'video' 要和后端字段名一致
try {
const res = await fetch('/api/upload', {
method: 'POST',
body: formData // 不要设 Content-Type，让浏览器自动生成
});
const data = await res.json();
} catch (err) {
console.error('上传失败:', err);
}
});
- 切记不要手动设置
Content-Type，否则FormData的 boundary 会被破坏，后端收不到文件 - 后端字段名（这里是
video）必须和服务端解析逻辑匹配，比如 Express 用multer.single('video') - 如需进度条，监听
fetch的upload.onprogress需用XMLHttpRequest，fetch原生不支持上传进度
上传失败常见原因：后端没配好或前端没容错
90% 的“上传不了”问题不在 HTML 或 JS，而在服务端配置或网络拦截。
- Nginx 默认限制上传大小，需在配置中加
client_max_body_size 1024m; - Node.js 的 Express 若用
body-parser，它不处理multipart，必须换multer或busboy - Chrome 对本地
file://协议禁用fetch上传，务必用http://或https://测试 - 跨域时后端必须返回
Access-Control-Allow-Origin和Access-Control-Allow-Methods: POST，且不能用通配符*配合带凭证的请求
移动端真机上传视频要注意 MIME 类型识别不准
iOS Safari 和部分安卓 WebView 上传相册视频时，file.type 经常是空字符串或 application/octet-stream，光靠 type 判断会失败。
装修公司源码，采用DIV+CSS布局，首页顶部采用了超大宽屏banner焦点图切换，带伸缩功能的导航条。首页信息展示量大，有利于SEO优化，首页版块包括，导航，焦点图切换，案例，行业动态，装修经验，装修知识。源码支持伪静态，后台开启即可，服务器必须支持rewrite功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。
立即学习“前端免费学习笔记（深入）”；
- 必须结合
file.name后缀判断：const ext = file.name.split('.').pop().toLowerCase(); if (['mp4', 'mov', 'avi'].includes(ext)) { ... } - 更可靠的方式是读取文件头（
file.slice(0, 4).arrayBuffer()），比对 MP4 的ftyp或 MOV 的moov签名，但开销大，一般项目够用就行 -
微信内置浏览器对
input type="file"的调起行为有差异，建议加capture="environment"显式启用摄像头，避免相册混淆
实际部署时最容易被忽略的是 Nginx 的 client_max_body_size 和后端 multipart 解析中间件是否真正生效——前端传得再对，后端卡在网关或解析层，日志里往往只报 400 或超时。
