線上直播原始碼，js 檔案上傳圖片上傳傳輸速度計算

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #progress{
            height:10px;
            width:500px;
            border: 1px solid gold;
            position: relative;
            border-radius: 5px;
        }
        #progress .progress-item{
            height:100%;
            position: absolute;
            left:0;
            top:0;
            background: chartreuse;
            border-radius: 5px;
            transition: width .3s linear;
        }
    </style>
</head>
<body>
檔案上傳框<br>
<input type="file" id="file"><br>
顯示進度條<br>
<div id="progress">
    <div></div>
</div>
上傳成功後的返回內容<br>
<span id="callback"></span>
</body>
<script>
    //首先監聽input框的變動，選中一個新的檔案會觸發change事件
    document.querySelector("#file").addEventListener("change",function () {
        //獲取到選中的檔案
        var file = document.querySelector("#file").files[0];
        //建立formdata物件
        var formdata = new FormData();
        formdata.append("file",file);
        //建立xhr，使用ajax進行檔案上傳
        var xhr = new XMLHttpRequest();
        xhr.open("post","/");
        //回撥
        xhr.onreadystatechange = function () {
            if (xhr.readyState==4 && xhr.status==200){
                document.querySelector("#callback").innerText = xhr.responseText;
            }
        }
        //獲取上傳的進度
        xhr.upload.onprogress = function (event) {
            if(event.lengthComputable){
                var percent = event.loaded/event.total *100;
                document.querySelector("#progress .progress-item").style.width = percent+"%";
            }
        }
        //將formdata上傳
        xhr.send(formdata);
    });
</script>
</html>

以上就是線上直播原始碼，js 檔案上傳圖片上傳傳輸速度計算，更多內容歡迎關注之後的文章

線上直播原始碼，js 檔案上傳 圖片上傳 傳輸速度計算

相關文章

線上直播原始碼，js 檔案上傳圖片上傳傳輸速度計算