直播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',')
            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 = '
                    } else {
                        //上傳失敗
                        console.log('圖片上傳失敗' + data.message);
                    }
                }
            }
        })
 
    </script>
</body>
</html>
以上就是直播app開發搭建，計算影片上傳所需時間，更多內容歡迎關注之後的文章
直播app開發搭建，計算影片上傳所需時間

相關文章
