直播app开发搭建，计算视频上传所需时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../lib/bootstrap.css" />
<script src="../lib/jquery.js"></script>
</head>
<body>
<!-- 文件选择框 -->
<input type="file" id="file1" />
<!-- 上传文件 -->
<button id="btnUpload">上传文件</button>
<!-- bootstrap中的进度条 -->
<div style="width: 500px; margin: 15px 10px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
0%
</div>
</div>
<!-- img标签,用来展示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800" />
<script>
//获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
//为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function() {
//获取文件的选择列表
var files = document.querySelector('#file1').files
if(files.length <= 0) {
return alert('请选择要上传的文件！')
}
console.log('用户选择了待上传的文件');
var fd = new FormData()
fd.append('avatar',files[0])
var xhr = new XMLHttpRequest()
//监听文件的上传进度 要写在open函数之前
xhr.upload.onprogress = function (e) {
if(e.lengthComputable) { //lengthComputable是一个表示进度信息是否可用的布尔值
var procentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(procentComplete);
//动态设置进度条
$('#percent').attr('style', 'width:' + procentComplete + '%;').html(procentComplete+ '%')
}
}
//监听上传完成的事件 在完成上传后将进度条颜色变为绿色
xhr.upload.onload = function (e) {
$('#percent').removeClass().addClass('progress-bar progress-bar-success')
}
xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
console.log(data);
if(data.status === 200) {
//上传成功
document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
} else {
//上传失败
console.log('图片上传失败' + data.message);
}
}
}
})
</script>
</body>
</html>
以上就是 直播app开发搭建，计算视频上传所需时间，更多内容欢迎关注之后的文章
标签：procentComplete,console,data,app,xhr,直播,var,上传 From： https://www.cnblogs.com/yunbaomengnan/p/17012418.html