原生JS实现视频上传可以通过以下步骤实现:
在HTML中添加一个文件输入框和一个提交按钮:
<input type="file" id="video-upload">
<button onclick="uploadVideo()">上传</button>
使用JavaScript获取文件输入框和提交按钮的引用,并为提交按钮添加点击事件监听器:
const videoUpload = document.getElementById('video-upload');
const uploadButton = document.querySelector('button');
uploadButton.addEventListener('click', uploadVideo);
在点击事件处理程序中获取选择的文件并创建FormData对象,然后使用XMLHttpRequest发送POST请求将文件上传到服务器:
function uploadVideo() {
const selectedFile = videoUpload.files[0];
const formData = new FormData();
formData.append('video', selectedFile);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload-video');
xhr.send(formData);
}
其中,/api/upload-video是服务器端接收视频文件的API地址。在实际应用中,需要根据具体情况修改该地址。