進度欄無法正常工作

Question

我正在嘗試創建進度條，以使用Javascript將文件上傳到AWS服務（lambda，S3），並且前端正在用materializecss完成。 但是，進度條移動得太快，並且在上傳之前到達終點，我可以看到使用innerHTML上傳文件的百分比。 所以，我確定它正在上傳。下面是我嘗試過的代碼：

<style>
 #progressdisplay {
            width: 100%;
            background-color: #229954;
            border-radius: 4px;
            text-align: center;
            line-height: 12px;
            color: white;
        }

        #myBar {
            height: 12px;
            background-color: grey;
            border-radius: 4px;
        }
    </style>

<div class="row">
        <div class="file-field input-field col s12">
            <div class="btn blue">
                <span>Course File</span>
                <input id="crsfile" type="file">
            </div>
            <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Select the file">
            </div>
        </div>
    </div>

    <br/>
    <div class="container" id="progressbar">
        <div id="myBar">
            <div id="progressdisplay"></div>
        </div>
    </div>

    <br/>

    <div class="container center">
        <button class="btn waves-effect waves-light blue" type="submit" name="action" onclick="combinedfunctions()">Send
        <i class="material-icons right">send</i>
        </button>
    </div>

<script>
request.on('httpUploadProgress', function(progress) {
                var percentage = document.getElementById("progressdisplay");
                percentage.innerHTML = (progress.loaded * 100) / progress.total + "%";
                //console.log(progress.loaded + " of " + progress.total + " bytes"); 
                function move() {

                    var width = 10;
                    var id = setInterval(frame, 10);

                    function frame() {
                        if (width >= 100) {
                            clearInterval(id);
                        } else {
                            width++;
                            this.$$("progressdisplay").style.width = percentage + '%';
                            this.$$("progressdisplay").innerHTML = percentage * 1 + '%';
                        }
                    }
                }
            });
</script>

Answer 1

這段代碼更有意義

request.on('httpUploadProgress', function(progress) {
    var element = document.getElementById("progressdisplay");
    var percentage = (progress.loaded * 100) / progress.total + "%";
    element.innerHTML = percentage;
    progressdisplay.style.width = percentage;
});