js实现视频上传代码
视频上传的基本实现
使用HTML5的<input type="file">元素可以轻松实现视频文件的选择功能。通过设置accept属性限制文件类型为视频格式。
<input type="file" id="videoUpload" accept="video/*">文件选择和预览
通过JavaScript监听文件选择事件，可以获取用户选择的视频文件对象。使用URL.createObjectURL()方法生成临时URL用于视频预览。
document.getElementById('videoUpload').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const videoURL = URL.createObjectURL(file);
const preview = document.createElement('video');
preview.src = videoURL;
preview.controls = true;
document.body.appendChild(preview);
});上传到服务器
使用FormData对象构建表单数据，通过fetch或XMLHttpRequest将视频文件发送到服务器。需要设置Content-Type为multipart/form-data。
function uploadVideo(file) {
const formData = new FormData();
formData.append('video', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log('Upload success:', data))
.catch(error => console.error('Error:', error));
}进度监控
通过XMLHttpRequest的upload属性可以监控上传进度，实时更新进度条显示。
function uploadWithProgress(file) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`Uploaded: ${percent.toFixed(2)}%`);
}
};
xhr.onload = function() {
console.log('Upload complete');
};
const formData = new FormData();
formData.append('video', file);
xhr.send(formData);
}文件验证
在上传前对视频文件进行验证，包括文件类型、大小等限制。
function validateVideo(file) {
const validTypes = ['video/mp4', 'video/webm', 'video/ogg'];
const maxSize = 100 * 1024 * 1024; // 100MB
if (!validTypes.includes(file.type)) {
alert('Invalid video format');
return false;
}
if (file.size > maxSize) {
alert('Video too large');
return false;
}
return true;
}分块上传
对于大视频文件，可以实现分块上传以提高可靠性和恢复能力。
async function chunkedUpload(file, chunkSize = 5 * 1024 * 1024) {
const totalChunks = Math.ceil(file.size / chunkSize);
let chunkNumber = 0;
while (chunkNumber < totalChunks) {
const start = chunkNumber * 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('chunkNumber', chunkNumber);
formData.append('totalChunks', totalChunks);
formData.append('filename', file.name);
await fetch('/upload-chunk', {
method: 'POST',
body: formData
});
chunkNumber++;
}
}使用第三方库
对于更复杂的需求，可以考虑使用现成的文件上传库如uppy或dropzone。
// 使用uppy示例
const uppy = new Uppy.Core()
.use(Uppy.Dashboard, { target: '#upload-container' })
.use(Uppy.XHRUpload, { endpoint: '/upload' });
uppy.on('complete', (result) => {
console.log('Upload complete:', result);
});这些方法涵盖了从基本到高级的视频上传功能实现，可以根据具体需求选择适合的方案。
