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

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

 

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

以上就是 直播app开发搭建,计算视频上传所需时间,更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
历史上的今天:
2021-12-29 android短视频开发,全屏观看视频时自动隐藏平台底部的功能栏
2021-12-29 直播源码网站,自定义平台界面,完成各项内容更改
2021-12-29 直播系统代码,自定义平台私聊对话框
点击右上角即可分享
微信分享提示