當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

js图片预览带进度条

發布時間：2023/12/13 综合教程 36 生活家

生活随笔收集整理的這篇文章主要介紹了 js图片预览带进度条小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        progress {
            width: 168px;
            height: 5px;
            color: #f00;
            background: #EFEFF4;
            border-radius: 0.1rem;
        }

        /* 表示總長度背景色 */
        progress::-webkit-progress-bar {
            background-color: #f2f2f2;
            border-radius: 0.2rem;
        }

        /* 表示已完成進度背景色 */
        progress::-webkit-progress-value {
            background: forestgreen;
            border-radius: 0.2rem;
        }
    </style>
</head>
<body>
<input type="file" id="myFile"/>
<div id="bar">
    上傳進度:
    <progress id="pro" value="0"></progress>
</div>
<div>
    <img src="" alt="GG" id="myImg"/>
</div>

</body>
<script src="../js/jquery.js"></script>
<script>

    var myFile = document.getElementById("myFile");
    //綁定事件(ECMAScript6寫法)
    myFile.addEventListener("change", () => {
        var file = myFile.files[0];
        //toDataURL(file);
        previewWithObjectURL(file);
    })

    //簡單的圖片預覽建議使用第一種方式
    //URL方式（第一種方式）src = blob:http://localhost:8080/f720711f-57e2-428f-8a47-ec59e5dbbc10
    function previewWithObjectURL(file) {
        var url = URL.createObjectURL(file);
        var reader = new FileReader();
        reader.readAsDataURL(file);
        //請求完成后,顯示圖片
        reader.onloadend = function (event) {
            document.getElementById("myImg").src = url;
        }
        //上傳過程中動態顯示進度條
        reader.onprogress = function (event) {
            if (event.lengthComputable) {
                document.getElementById("pro").value = event.loaded / event.total;
            }
        }
    }

    //DataURL（第二種方式）src = data image/jpeg;base64,/hihfejaojshf24ji3h53i
    function toDataURL(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        //請求完成后,顯示圖片
        reader.onloadend = function (event) {
            document.getElementById("myImg").src = event.target.result;
        }
        //上傳過程中動態顯示進度條
        reader.onprogress = function (event) {
            if (event.lengthComputable) {
                document.getElementById("pro").value = event.loaded / event.total;
            }
        }
    }
</script>
</html>

總結

以上是生活随笔為你收集整理的js图片预览带进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。