js手机端上传视频及进度
时间: 2023-09-24 08:12:16 浏览: 41
要在手机端上传视频并显示上传进度,你可以使用HTML5的File API和XMLHttpRequest对象来实现。具体步骤如下:
1. 添加一个文件选择器(input[type='file']),让用户选择视频文件。
2. 监听文件选择器的change事件,获取用户选择的文件对象。
3. 创建一个FormData对象,将文件对象添加到FormData中。
4. 创建一个XMLHttpRequest对象,设置onprogress事件监听上传进度。
5. 调用XMLHttpRequest的open方法,指定上传方法和服务器地址。
6. 调用send方法将FormData对象上传到服务器。
以下是一个示例代码,供参考:
```
<input type="file" id="videoFile">
<progress id="progressBar" value="0" max="100"></progress>
<script>
var videoFile = document.getElementById('videoFile');
var progressBar = document.getElementById('progressBar');
videoFile.addEventListener('change', function() {
var file = videoFile.files[0];
var formData = new FormData();
formData.append('video', file);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(event) {
var percent = event.loaded / event.total * 100;
progressBar.value = percent;
});
xhr.open('POST', '/upload-video');
xhr.send(formData);
});
</script>
```
在上面的示例代码中,我们监听了XMLHttpRequest的upload的progress事件,用来更新进度条的值。注意,这里的上传地址('/upload-video')应该替换成你自己的上传服务器地址。