直播app开发搭建，计算视频上传所需时间

直播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开发搭建，计算视频上传所需时间，更多内容欢迎关注之后的文章

 

posted @ 2022-12-29 14:15  云豹科技-苏凌霄  阅读(46)  评论(0)    收藏  举报