直播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开发搭建,计算视频上传所需时间,更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
2021-12-29 android短视频开发,全屏观看视频时自动隐藏平台底部的功能栏
2021-12-29 直播源码网站,自定义平台界面,完成各项内容更改
2021-12-29 直播系统代码,自定义平台私聊对话框